{% extends "base.html" %}

{% block title %}{{ config.METAREGISTRY_TITLE }}{% 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="{{ fastapi_url_for("get_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. An alternate
                view over the registry by keywords can be found
                <a href="{{ url_for('metaregistry_ui.highlights_keywords') }}">here</a>.
            </p>
            {% if config.METAREGISTRY_RESOURCES_SUBHEADER %}
            {{ config.METAREGISTRY_RESOURCES_SUBHEADER | safe}}
            {% endif %}
        </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('metaregistry_ui.resource', prefix=prefix) }}">{{ resource.get_name() }}</a>
                        {# FIXME adding all bioschemas annotations slows down pretty dramatically #}
                        {# <script type="application/ld+json">{{ resource.get_bioschemas_jsonld() | safe }}</script> #}
                    </td>
                    <td class="text-nowrap"><code>{{ prefix }}</code></td>
                    {% set description = resource.get_short_description(use_markdown=True) %}
                    <td>{% if description %}<small>{{ description }}</small>{% endif %}</td>
                </tr>
            {% endfor %}
        </table>
    </div>
{% endblock %}
