{% extends "base.html" %}

{% block title %}Bioregistry{% endblock %}

{% block styles %}
    {{ super() }}
    <!-- DataTables, see: https://datatables.net/examples/styling/bootstrap4.html-->
    <link
            rel="stylesheet"
            href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css"
    />
{% endblock %}

{% block scripts %}
    {{ super() }}
    <!-- DataTables, see: https://datatables.net/examples/styling/bootstrap4.html-->
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#contributor-entries").DataTable({
                "order": [[0, "asc"]]
            });
            $("#contributor-entries_wrapper").children(":first-child").addClass("card-body");
            $("#contributor-entries_wrapper").children(":last-child").addClass("card-body");
        });
    </script>
{% endblock %}

{% block container %}
    <div class="card">
        <div class="card-header">
            <div class="row align-items-center">
                <div class="col-8"><h5 style="margin: 0">Contributors</h5></div>
                <div class="col-4 text-right">
                    <div class="dropdown">
                        <button class="btn btn-sm btn-outline-dark dropdown-toggle" type="button"
                                id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                                aria-expanded="false">
                            Download
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            {% for label, key in formats %}
                                <a class="dropdown-item"
                                   href="{{ url_for("api.contributors", format=key) }}">
                                    {{ label }} <i class="fas fa-download"></i>
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <p style="margin-bottom: 0">
                The following users have made contributions to the Bioregistry.
            </p>
        </div>
        <table id="contributor-entries" class="table table-striped table-hover">
            <thead>
            <tr>
                <td>Name</td>
                <td>ORCID</td>
                {# <td>Email</td> #}
                <td>Prefixes</td>
                <td>Reviews</td>
                <td>Collections</td>
            </tr>
            </thead>
            {% for row in rows %}
                <tr>
                    <td><a href="{{ url_for('ui.contributor', orcid=row.orcid) }}">{{ row.name }}</a></td>
                    <td class="text-nowrap"><a href="https://orcid.org/{{ row.orcid }}">{{ row.orcid }}</a></td>
                    {#
                    <td class="text-nowrap">
                        {% if row.email %}
                            <a href="mailto:{{ row.email }}">{{ row.email }}</a>
                        {% endif %}
                    </td>
                    #}
                    <td style="text-align: right;">{{ prefix_contributions.get(row.orcid, []) | length }}</td>
                    <td style="text-align: right;">{{ prefix_reviews.get(row.orcid, []) | length }}</td>
                    <td style="text-align: right;">{{ collections.get(row.orcid, []) | length }}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
{% endblock %}
