{% extends "base.html" %}

{% block title %}Concon - {{ team_name }}{% endblock %}

{% block content %}
{% if breadcrumbs %}
<h1>
    {% for crumb in breadcrumbs %}
        {% if not loop.first %} / {% endif %}
        <a href="{{ crumb.url }}">{{ crumb.name }}</a>
    {% endfor %}
</h1>
{% endif %}

<ul class="tabs" data-tabs id="team-tabs">
    <li class="tabs-title is-active"><a href="#datasets" aria-selected="true">Datasets</a></li>
    <li class="tabs-title"><a href="#files">Files</a></li>
    {% if is_team_admin %}
    <li class="tabs-title"><a href="#members">Members</a></li>
    {% endif %}
    <li class="tabs-title"><a href="#subteams">Sub-teams</a></li>
</ul>

<div class="tabs-content" data-tabs-content="team-tabs">
    <div class="tabs-panel is-active" id="datasets">
        {% if is_team_admin %}
        <h3>New dataset</h3>
        <form method="post" action="/_datasets/new">
            <div class="input-group">
                <input class="input-group-field" type="text" name="name" placeholder="Dataset name" required>
                <input type="hidden" name="team" value="{{ team_path }}">
                <select class="input-group-field" name="visibility">
                    <option value="TeamOnly" selected>Team only</option>
                    <option value="LoggedUsers">Logged users only</option>
                    <option value="Public">Public</option>
                </select>
                <div class="input-group-button">
                    <button type="submit" class="button">Create</button>
                </div>
            </div>
        </form>
        {% endif %}

        {% if datasets %}
        <h3>Datasets</h3>
        <ul class="no-bullet">
            {% for ds in datasets %}
                <li><a href="{{ ds.url }}">{{ ds.name }}</a></li>
            {% endfor %}
        </ul>
        {% else %}
        <p>No datasets in this team.</p>
        {% endif %}
    </div>

    <div class="tabs-panel" id="files">
        <ul class="tabs" data-tabs id="files-subtabs">
            <li class="tabs-title is-active"><a href="#files-papers" aria-selected="true">Papers</a></li>
            {% if can_upload %}
            <li class="tabs-title"><a href="#files-upload">Upload</a></li>
            {% endif %}
            <li class="tabs-title"><a href="#files-query">SPARQL Query</a></li>
        </ul>

        <div class="tabs-content" data-tabs-content="files-subtabs">
            <div class="tabs-panel is-active" id="files-papers">
                {% if files %}
                {% for f in files %}
                <div class="paper-card">
                    {% set file_team_prefix = "/" ~ f.catalog_team if f.catalog_team and f.catalog_team != "root" else "" %}
                    <h2><a href="{{ file_team_prefix }}/_files/{{ f.uuid }}/_view">{{ f.title if f.title else f.file_name }}</a></h2>
                    {% if f.authors %}
                    <p class="secondary-color">{{ f.authors }}</p>
                    {% endif %}
                    <p class="secondary-color" style="font-size: 0.85rem;">
                        {% if f.year %}{{ f.year }}{% endif %}
                        {% if f.journal %} &middot; {{ f.journal }}{% endif %}
                        {% if f.doi %} &middot; DOI: <a href="https://doi.org/{{ f.doi }}">{{ f.doi }}</a>{% endif %}
                        {% if f.catalog_team %} &middot; <span class="label">{{ f.catalog_team }}</span>{% endif %}
                    </p>
                    {% if f.abstract_snippet %}
                    <p style="font-size: 0.9rem;">{{ f.abstract_snippet }}</p>
                    {% endif %}
                    <div class="paper-actions">
                        <a href="{{ file_team_prefix }}/_files/{{ f.uuid }}" class="button tiny">PDF</a>
                        {% if can_upload %}
                        <a href="{{ file_team_prefix }}/_files/{{ f.uuid }}/_edit" class="button tiny secondary">Edit</a>
                        {% endif %}
                        {% if is_team_admin %}
                        <form method="post" action="{{ file_team_prefix }}/_files/{{ f.uuid }}/_delete" class="inline-form"
                              onsubmit="return confirm('Delete this file?')">
                            <button type="submit" class="button tiny alert">Delete</button>
                        </form>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}

                {% if files_total_pages > 1 %}
                <nav aria-label="Pagination">
                    <ul class="pagination">
                        {% if files_page > 1 %}
                        <li class="pagination-previous"><a href="?page={{ files_page - 1 }}#files">Previous</a></li>
                        {% else %}
                        <li class="pagination-previous disabled">Previous</li>
                        {% endif %}
                        {% for p in range(1, files_total_pages + 1) %}
                            {% if p == files_page %}
                            <li class="current">{{ p }}</li>
                            {% else %}
                            <li><a href="?page={{ p }}#files">{{ p }}</a></li>
                            {% endif %}
                        {% endfor %}
                        {% if files_page < files_total_pages %}
                        <li class="pagination-next"><a href="?page={{ files_page + 1 }}#files">Next</a></li>
                        {% else %}
                        <li class="pagination-next disabled">Next</li>
                        {% endif %}
                    </ul>
                </nav>
                <p>{{ files_total }} paper(s)</p>
                {% endif %}

                {% else %}
                <p>No papers uploaded yet.</p>
                {% endif %}
            </div>

            {% if can_upload %}
            <div class="tabs-panel" id="files-upload">
                <form method="post" action="/_api/files/upload" enctype="multipart/form-data">
                    <input type="hidden" name="team_path" value="{{ team_path_for_files }}">
                    <label for="file-input">PDF file</label>
                    <input type="file" id="file-input" name="file" accept="application/pdf" required>
                    <button type="submit" class="button">Upload</button>
                </form>
            </div>
            {% endif %}

            <div class="tabs-panel" id="files-query">
                <link rel="stylesheet" href="/static/vendor/yasgui.min.css">
                <div id="files-yasgui"></div>
                <script src="/static/vendor/yasgui.min.js"></script>
                <script>
                    document.addEventListener('DOMContentLoaded', function() {
                        if (document.getElementById('files-yasgui')) {
                            new Yasgui(document.getElementById('files-yasgui'), {
                                requestConfig: {
                                    endpoint: "{{ team_url_prefix|safe }}/_files/_query"
                                },
                                copyEndpointOnNewTab: false,
                                persistenceId: "yasgui-files-{{ team_path_for_files|safe }}"
                            });
                        }
                    });
                </script>
            </div>
        </div>
    </div>

    {% if is_team_admin %}
    <div class="tabs-panel" id="members">
        {% if members %}
        <table class="hover">
            <thead><tr><th>Username</th></tr></thead>
            <tbody>
                {% for m in members %}
                <tr><td><a href="/_users/{{ m.username }}">{{ m.username }}</a></td></tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p>No members.</p>
        {% endif %}
    </div>
    {% endif %}

    <div class="tabs-panel" id="subteams">
        {% if is_team_admin %}
        <h3>New sub-team</h3>
        <form method="post" action="{{ team_url_prefix }}/_new_team">
            <div class="input-group" style="max-width: 400px;">
                <input class="input-group-field" type="text" name="name" placeholder="Sub-team name" required>
                <div class="input-group-button">
                    <button type="submit" class="button">Create</button>
                </div>
            </div>
        </form>
        {% endif %}

        {% if sub_teams %}
        <h3>Sub-teams</h3>
        <ul class="no-bullet">
            {% for t in sub_teams %}
                <li><a href="{{ team_url_prefix }}/{{ t.name }}">{{ t.name }}</a></li>
            {% endfor %}
        </ul>
        {% else %}
        <p>No sub-teams.</p>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// Activate tab from URL hash
$(document).ready(function() {
    var hash = window.location.hash;
    if (hash) {
        var tab = $('[data-tabs] a[href="' + hash + '"]');
        if (tab.length) {
            tab.click();
        }
    }
    // Update hash when tab changes
    $('[data-tabs]').on('change.zf.tabs', function() {
        var activeTab = $(this).find('.is-active a').attr('href');
        if (activeTab) {
            history.replaceState(null, null, activeTab);
        }
    });
});
</script>
{% endblock %}