{% extends "base.html" %}

{% import "bootstrap4/form.html" as wtf %}
{% import "bootstrap4/utils.html" as util %}

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

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

{% block content %}
    <div class="container" style="margin-top: 50px; margin-bottom: 50px">
        {{ util.render_messages(dismissible=True, container=False) }}
        <div class="row">
            <div class="card">
                <h5 class="card-header text-center">Biomappings Curation Interface</h5>
                <div class="card-body">
                    {% if controller.total_curated %}
                        <a href="{{ url_for_state('.run_commit', state) }}">
                            <button class="btn btn-sm btn-outline-dark">Commit ({{ controller.total_curated }}) and Push
                                <span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
                            </button>
                        </a>
                    {% endif %}
                    {% if query %}
                        <span class="btn btn-sm btn-outline-dark">
                            Query: <code>{{ query }}</code> ({{ "{:,d}".format(remaining_rows) }} 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">
                    <thead class="thead-light">
                    <tr>
                        {% if show_lines %}
                        <th class="text-right" scope="col">Line</th>
                        {% endif %}
                        <th scope="col">Source</th>
                        <th scope="col">Source Name</th>
                        {% if show_relations %}
                            <th scope="col">Relation</th>
                        {% endif %}
                        <th scope="col">Target</th>
                        <th scope="col">Target Name</th>
                        <th scope="col">Confidence</th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for line, p in predictions %}
                        <tr>
                            {% if show_lines %}
                            <td class="text-right">{{ 1 + line }}</td>
                            {% endif %}
                            <td>
                                <a href="{{ controller.get_url(p['source prefix'], p['source identifier']) }}">
                                    {{ controller.get_curie(p['source prefix'], p['source identifier']) }}
                                </a>
                            </td>
                            <td>{{ p['source name'] }}</td>
                            {% if show_relations %}
                                <td>{{ p['relation'] }}</td>
                            {% endif %}
                            <td>
                                <a href="{{ controller.get_url(p['target prefix'], p['target identifier']) }}">
                                    {{ controller.get_curie(p['target prefix'], p['target identifier']) }}
                                </a>
                            </td>
                            <td>{{ p['target 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-toggle="tooltip" title="The {{ p['relation'] }} relationship is correct."
                                   href="{{ url_for_state('.mark', state, line=line, value='yup') }}">
                                    <i class="far fa-thumbs-up"></i>
                                </a>
                            </td>
                            <td>
                                <a data-toggle="tooltip"
                                   title="These two entities do not have the {{ p['relation'] }} relationship. You should still click this even if you think there could be a different relationship."
                                   href="{{ url_for_state('.mark', state, line=line, value='nope') }}">
                                    <i class="far fa-thumbs-down"></i>
                                </a>
                            </td>
                            <td>
                                <a style="color: darkgoldenrod;" data-toggle="tooltip"
                                   title="I'm not sure if this is correct or not"
                                   href="{{ url_for_state('.mark', state, line=line, value='idk') }}">
                                    <i class="far fa-question-circle"></i>
                                </a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>

                <form class="form" method="POST" role="form" action="{{ url_for_state('.add_mapping', state) }}">
                    <table class="table" style="margin-bottom: 0">
                        <tr>
                            <td>{{ wtf.render_field(form.source_prefix) }}</td>
                            <td>{{ wtf.render_field(form.source_id) }}</td>
                            <td>{{ wtf.render_field(form.source_name) }}</td>
                            <td>{{ wtf.render_field(form.target_prefix) }}</td>
                            <td>{{ wtf.render_field(form.target_id) }}</td>
                            <td>{{ wtf.render_field(form.target_name) }}</td>
                            <td style="vertical-align: middle">
                                {{ wtf.render_field(form.submit, class="btn btn-primary") }}
                            </td>
                        </tr>
                    </table>
                </form>

                <div class="card-footer text-center">
                    {% if 0 <= state.offset - state.limit %}
                        <a href="{{ url_for_state('.home', state, offset=0) }}">
                            <i class="fas fa-angle-double-left"></i>
                            First
                        </a> &nbsp;|&nbsp;
                        <a href="{{ url_for_state('.home', state, offset=state.offset - state.limit) }}">
                            <i class="fas fa-angle-left"></i>
                            Previous {{ state.limit }}
                        </a>  &nbsp;|&nbsp;
                    {% endif %}
                    {% if state.offset < remaining_rows - state.limit %}
                        <a href="{{ url_for_state('.home', state, offset=state.offset + state.limit) }}">
                            Next {{ limit }}
                            <i class="fas fa-angle-right"></i>
                        </a>  &nbsp;|&nbsp;
                    {% endif %}
                    {% if state.offset < remaining_rows - state.limit %}
                        <a href="{{ url_for_state('.home', state, offset=remaining_rows - state.limit) }}">
                            Last ({{ "{:,d}".format(remaining_rows) }})
                            <i class="fas fa-angle-double-right"></i>
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
