{% 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 () {
            $("#table-entries").DataTable({
                "order": [[1, "asc"]]
            });
            $("#table-entries_wrapper").children(":first-child").addClass("card-body");
            $("#table-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">Registry</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.resources", format=key) }}">
                                    {{ label }} <i class="fas fa-download"></i>
                                </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card-body">
            <p>
                The registry contains metadata about ontologies, controlled vocabularies, and resources including their
                preferred prefix, name, description, homepage, mappings to other registries, and more.
            </p>
            <p style="margin-bottom: 0">
                Anyone can <a href="https://github.com/biopragmatics/bioregistry/issues/new/choose">suggest
                improvements</a> or make pull requests to update the underlying database, which is stored in
                <a href="https://github.com/biopragmatics/bioregistry/blob/main/src/bioregistry/data/bioregistry.json">
                    JSON</a> on GitHub where the community can engage in an open review process.
            </p>
        </div>
        <table id="table-entries" class="table table-striped table-hover ">
            <thead>
            <tr>
                <td>Name</td>
                <td>Prefix</td>
                <td>Description</td>
            </tr>
            </thead>
            {% for prefix, resource in registry.items() %}
                <tr>
                    <td><a href="{{ url_for('ui.resource', prefix=prefix) }}">{{ resource.get_name() }}</a></td>
                    <td class="text-nowrap"><code>{{ prefix }}</code></td>
                    {% set description = resource.get_description() %}
                    <td>{% if description %}<small>{{ description }}</small>{% endif %}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
{% endblock %}
