{% extends "layout.html" %}
{% block title %}{{title}}{% endblock %}
{% block head %}
  {{ super() }}
{% endblock %}
{% block page %}{{title}}{% endblock %}
{% block heading %}
  {{ super() }}
{% endblock %}

{% block content %}

    <div class="container">
    <table>
        <tr>
            <th>Subject</th>
            <th>Relation</th>
            <th>Object</th>
        </tr>
        <tr>
            <td>
                <input id="bel-subject-query" type="text" value='p(HGNC:"MAPT")'>
            </td>
            <td>
                <select id="bel-relation-query" title="BEL-Relationship to be looked at">
                    <option value="?">?</option>
                {% for rel in additional_variables.bel_relation_class_list %}
                    <option value="{{ rel.value }}">{{ rel.name }}</option>
                {% endfor %}
                </select>
            </td>
            <td>
                <input id="bel-object-query" type="text" value="?">
            </td>
            <td style="padding-left: 10px">
                <button name="belq" class="btn btn-primary" type="button" onclick="query_bel()">Submit</button>
            </td>
            <td>
                <img id="loading-bel" src="{{ url_for('static', filename='gif/loading.gif') }}" style= "visibility:hidden; padding-left: 10px" alt="loading" width="50">
            </td>
        </tr>
    </table>
    <style>
        .float-container {
            padding: 10px;
        }

        .float-child {
            width: 50%;
            float: left;
            padding: 10px;
            max-width: 350px;
        }

        .dataTables_wrapper .dt-buttons {
          float:none;
          text-align: right;
        }

        table.dataTable thead .sorting,
        table.dataTable thead .sorting_asc,
        table.dataTable thead .sorting_desc,
        table.dataTable thead .sorting_asc_disabled,
        table.dataTable thead .sorting_desc_disabled {
          cursor: pointer;
          *cursor: hand;
          background-repeat: no-repeat;
          background-position: center right;
        }
    </style>
    <div class="float-container">
        <div class="float-child">
            <p>Annotation Key</p>
            <select id="bel-anno-key-query" title="BEL Annotation Key" onchange="populateAnnoVals()">
                <option value="?"></option>
            {% for rel in anno_keys.anno_keys %}
                <option value="{{ rel }}">{{ rel }}</option>
            {% endfor %}
            </select>
        </div>

        <div class="float-child">
            <p>Annotation Value</p>
            <select id="bel-anno-val-query" title="BEL Annotation Value">
                <option value="?"></option>
                {% if anno_vals %}
                    {% for rel in anno_vals %}
                        <option value="{{ rel }}">{{ rel }}</option>
                    {% endfor %}
            {% endif %}
            </select>
        </div>
    </div>

</div>

    <div id="result" class="table table-striped table-sm" style="padding: 1%"></div>

{% endblock %}
{% block footer %}
{{ super() }}
{% endblock %}