{% extends "base.html" %}

{% import "bootstrap5/utils.html" as util %}

{% block title %}{{ title }} ({{ "{:,d}".format(n_predictions) }}){% endblock %}

{% macro progress_color(confidence) -%}
    {% if confidence > 85 %}
        bg-success
    {% elif confidence > 60 %}
        bg-warning
    {% else %}
        bg-danger
    {% endif %}
{%- endmacro %}

{% macro render_pagination_element(state, b) %}
<li class="page-item">
<a class="page-link" href="{{ url_for_state('.home', state, offset=b.offset) }}">
    {% if b.position == "after" %}<i class="bi bi-{{ b.icon }}"></i>{% endif %}
    {{ b.text }}
    {% if b.position == "before" %}<i class="bi bi-{{ b.icon }}"></i>{% endif %}
</a>
</li>
{% endmacro %}

{% block content %}
    <div class="container" style="margin-top: 50px; margin-bottom: 50px">
        {{ util.render_messages(dismissible=True, container=False) }}
            <div class="card">
                <h5 class="card-header text-center">
                    <a class="btn btn-primary btn-sm" style="float: right;"
                       href="{{ url_for_state('.summary', state=state) }}">
                        Summarize
                    </a>

                    {% set remote_unpersisted = controller.count_remote_unpersisted() %}
                    {%- if remote_unpersisted %}
                    <a class="btn btn-primary btn-sm" style="float: right; margin-right: 0.5em" href="{{ url_for_state('.run_commit', state) }}">
                       Commit/Push ({{ remote_unpersisted }})
                       <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                    </a>
                    {% endif %}
                    {%- set unpersisted = controller.count_unpersisted() %}
                    {%- if unpersisted %}
                    <a class="btn btn-primary btn-sm" style="float: right; margin-right: 0.5em" href="{{ url_for_state('.run_persist', state) }}">
                        Save ({{ unpersisted }}) <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                    </a>
                    {% endif %}
                    {{ title }}
                </h5>
                <div class="card-body">
                    {% if query %}
                        <span class="btn btn-sm btn-outline-dark">
                            Query: <code>{{ query }}</code> ({{ "{:,d}".format(n_predictions) }} Results)
                        </span>
                        <a href="{{ url_for('.home') }}">
                            <button class="btn btn-sm btn-outline-dark">Clear</button>
                        </a>
                    {% else %}
                        <form class="form" method="GET" role="form" action="{{ url_for('.home') }}">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <button type="submit" class="btn btn-outline-secondary">Go!</button>
                                </div>
                                <input type="text" class="form-control" placeholder="Search for..." name="query">
                            </div>
                        </form>
                    {% endif %}
                </div>
                <table class="table table-striped table-hover table-sm mb-0">
                    <thead class="thead-light">
                    <tr>
                        <th scope="col">Subject</th>
                        <th scope="col">Subject Name</th>
                        {% if show_relations %}
                            <th scope="col">Predicate</th>
                        {% endif %}
                        <th scope="col">Object</th>
                        <th scope="col">Object Label</th>
                        <th scope="col">Conf.</th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for p in predictions %}
                        <tr>
                            <td>
                                <a href="{{ resolver_base }}/{{ p.subject.curie }}">
                                    {{ p.subject.curie }}
                                </a>
                            </td>
                            <td>{{ p.subject_name }}</td>
                            {% if show_relations %}
                                <td>{{ p.predicate.curie }}</td>
                            {% endif %}
                            <td>
                                <a href="{{ resolver_base }}/{{ p.object.curie }}">
                                    {{ p.object.curie }}
                                </a>
                            </td>
                            <td>{{ p.object_name }}</td>
                            <td>
                                <div class="progress" style="margin-bottom: 0">
                                    {% set confidence = ((p.confidence | float) * 100) | int %}
                                    <div class="progress-bar progress-bar-striped {{ progress_color(confidence) }}"
                                         role="progressbar"
                                         aria-valuenow="{{ confidence }}" aria-valuemin="0"
                                         aria-valuemax="100"
                                         style="width: {{ confidence }}%">
                                        <span>{{ confidence }}%</span>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a data-bs-toggle="tooltip" title="The {{ p.predicate.curie }} relationship is correct."
                                   href="{{ url_for_state('.mark', state, curie=p.record.curie, value='correct') }}">
                                    <i class="bi bi-hand-thumbs-up"></i>
                                </a>
                            </td>
                            <td class="text-nowrap">
                                <a data-bs-toggle="tooltip"
                                   title="{{ p.subject_name }} (source) is broader than {{ p.object_name }} (object)."
                                   href="{{ url_for_state('.mark', state, curie=p.record.curie, value='BROAD') }}">
                                    <i class="bi bi-chevron-left"></i>
                                </a>
                            </td>
                            <td class="text-nowrap">
                                <a data-bs-toggle="tooltip"
                                   title="{{ p.subject_name }} (source) is narrower than {{ p.object_name }} (object)."
                                   href="{{ url_for_state('.mark', state, curie=p.record.curie, value='NARROW') }}">
                                   <i class="bi bi-chevron-right"></i>
                                </a>
                            </td>
                            <td>
                                <a data-bs-toggle="tooltip"
                                   title="These two entities do not have the {{ p.predicate.curie }} relationship. You should still click this even if you think there could be a different relationship."
                                   href="{{ url_for_state('.mark', state, curie=p.record.curie, value='incorrect') }}">
                                    <i class="bi bi-hand-thumbs-down"></i>
                                </a>
                            </td>
                            <td>
                                <a style="color: darkgoldenrod;" data-bs-toggle="tooltip"
                                   title="I'm not sure if this is correct or not"
                                   href="{{ url_for_state('.mark', state, curie=p.record.curie, value='unsure') }}">
                                    <i class="bi bi-question-circle"></i>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

                {%- if pagination_elements %}
                <div class="card-footer text-center">
                    <nav>
                    <ul class="pagination justify-content-center" style="margin-bottom: 0">
                    {% for pagination_element in pagination_elements %}
                    {{ render_pagination_element(state, pagination_element) }}
                    {% endfor %}
                    </ul>
                    </nav>
                </div>
                {%- endif %}
            </div>
    </div>
{% endblock %}