{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <div class="row mb-5">
        <div class="col">
            <h1 class="fw-semibold lh-2">Repository - active entries</h1>
            <p class="mb-2">Click <a class="custom-link" href="{{ url_for('routes.overview_retired') }}"><b>here</b></a> to go to the retired entries.</p>
        </div>
    </div>
    <div class="row my-3">
        <div class="col">
            <h3 class="fw-semibold lh-2">Search</h3>
            <p>Combine different queries by filling in the search form</p>
        </div>
    </div>
    {% with messages = get_flashed_messages() %}
    {% if messages %}
    <div class="row">
        <div class="card card-body">
            <div class="col text-center mx-auto">
                <h4 class="fw-semibold lh-2">Error during search!</h4>
                <ul class="lh-base list-unstyled">
                {% for message in messages %}
                    <li><p class="lead mb-1">{{ message }}</p></li>
                {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    {% endif %}
    {% endwith %}
    <form id="queryForm" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="row my-2">
            <div class="col">
                <h6 class="fw-semibold lh-2">Query builder</h6>
                <p>Hover over <i class="bi bi-question-circle"></i> icons to see more information.</p>
                <div id="builder"></div>
                <input type="hidden" name="rules" id="rules-input">
            </div>
        </div>
        <div class="row align-items-center mb-3">
            <div class="col-5">
                <h6 class="fw-semibold lh-2">Substructure search</h6>
                <div class="row align-items-center">
                    <div class="col">
                        <div class="form-floating">
                            <input id="substructure_query" name="substructure_query" class="form-control form-control-sm" type="text" placeholder="n/a" title="Insert SMILES (e.g. 'C1CCCCC1') or SMARTS (e.g. '[c]-[X]') query">
                            <label for="substructure_query" class="form-label">Insert SMILES or SMARTS query <i class="bi bi-question-circle"></i></label>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="form-check">
                            <input class="form-check-input" value="smiles" type="radio" name="query_substructure" id="smiles" checked>
                            <label class="form-check-label" for="smiles">SMILES</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" value="smarts" type="radio" name="query_substructure" id="smarts">
                            <label class="form-check-label" for="smarts">SMARTS</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-7">
                <h6 class="fw-semibold lh-2">Reaction search</h6>
                <div class="row align-items-center">
                    <div class="col">
                        <div class="form-floating">
                            <input id="reaction_query" name="reaction_query" class="form-control form-control-sm" type="text" placeholder="n/a" title="Search MITE for a reaction SMARTS. Converts query to a fingerprint and matches against MITE entries at a given similarity.">
                            <label for="reaction_query" class="form-label">Insert reaction SMARTS query <i class="bi bi-question-circle"></i></label>
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-floating">
                            <input id="similarity" name="similarity" class="form-control form-control-sm" type="number" value="0.7" min="0.1" max="1.0" step="0.1" placeholder="n/a" title="Similarity score cutoff (the higher, the more stringent match).">
                            <label for="similarity" class="form-label">Similarity <i class="bi bi-question-circle"></i></label>
                        </div>
                    </div>
                    <div class="col-auto">
                        <div class="form-check">
                            <input class="form-check-input" value="nongreedy" type="radio" name="reaction_smarts_radio" id="nongreedy" checked>
                            <label class="form-check-label" for="nongreedy">Differential FP <i class="bi bi-question-circle" title="Fingerprint of the transformation pattern - reactants subtracted from products ('What structural features were gained or lost during the reaction?'). Uses RDKit's 'CreateDifferenceFingerprintForReaction'"></i></label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" value="greedy" type="radio" name="reaction_smarts_radio" id="greedy">
                            <label class="form-check-label" for="greedy">Structural FP <i class="bi bi-question-circle" title="Fingerprint of the union of all reactants, agents, and products of the reaction SMARTS ('What chemical groups and substructures appear anywhere in the reaction?'). Uses RDKit's 'CreateStructuralFingerprintForReaction'."></i></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row align-items-center mb-3">
            <h6 class="fw-semibold lh-2">Sequence search</h6>
            <div class="row align-items-center">
                <div class="col-8">
                    <div class="form-floating">
                        <input id="sequence_query" name="sequence_query" class="form-control form-control-sm" type="text" placeholder="n/a" title="Match a protein sequence against MITE entries using BLASTp.">
                        <label for="reaction_query" class="form-label">Insert protein sequence <i class="bi bi-question-circle"></i></label>
                    </div>
                </div>
                <div class="col-4">
                    <div class="form-floating">
                        <input id="sequence_similarity" name="sequence_similarity" class="form-control form-control-sm" type="number" value="10" min="1" step="1" placeholder="n/a" title="Specify a E-value as match cutoff.">
                        <label for="reaction_query" class="form-label">E-value <i class="bi bi-question-circle"></i></label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row my-3">
            <div class="col text-center mx-auto">
                <button id="submit" type="submit" class="btn btn-primary"><i class="bi bi-search"></i> Submit search</button>
            </div>
        </div>
    </form>
    <div class="row mt-4">
        <div class="col">
            <h3 class="fw-semibold lh-2">Overview</h3>
        </div>
    </div>
    {% if filtered %}
    <div class="row align-items-center justify-content-end mb-3">
        <div class="col">
            <div class="lead">Number of entries matching filters: {{ entries | length }}</div>
        </div>
        <div class="col-auto">
            <a href="{{ url_for('routes.download_identifier', identifier=job_id ~ '.csv') }}">
                <button class="btn btn-secondary" type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Download results as .csv-file.">
                <i class="bi bi-download"></i>
                </button>
            </a>
        </div>
    </div>
    {% endif %}
    <table class="my-3 table table-striped table-hover">
        <thead>
            <tr>
              {% for header in headers %}
                <th>{{ header[1] }}</th>
              {% endfor %}
            </tr>
        </thead>
        <tbody class="align-middle">
        {% for row in entries %}
          <tr>
            {% for header in headers %}
              {% if header[0] == "accession" %}
              <td><a class="custom-link" target="_blank" href="{{ url_for('routes.repository', mite_acc=row[header[0]]) }}">{{ row[header[0]] }}</a></td>
              {% elif header[0] == "status" %}
              <td class="text-center">{{ row[header[0]] | safe }}</td>
              {% elif header[0] == "description" %}
              <td>{{ row[header[0]] | truncate(75, True) }}</td>
              {% elif header[0] == "reaction_description" %}
              <td>{{ row[header[0]] | truncate(75, True) }}</td>
              {% else %}
              <td>{{ row[header[0]] }}</td>
              {% endif %}
            {% endfor %}
          </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
<script type="text/javascript" src="{{ url_for('static', filename='js/querybuilder.js') }}" defer></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const formVals = {{ form_vals | tojson | safe }};
    initCustomQueryBuilder(formVals);
});
</script>
{% endblock %}