{% extends 'base.html' %}

{% block content %}
<div class="container my-5">
    <div class="row mb-4">
        <div class="col">
            <h1 class="fw-semibold lh-2">SMILES Generation for Peptides</h1>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <p class="lead mb-2">This page offers functionality to generate a SMILES string from a peptide sequence.</p>
        </div>
    </div>
    <div class="row">
        {% with messages = get_flashed_messages() %}
        {% if messages %}
        <div class="card card-body">
            <div class="col text-center mx-auto">
                <h4 class="fw-semibold lh-2">Error during peptide SMILES generation!</h4>
                <ul class="lh-base list-unstyled">
                {% for message in messages %}
                    <li><p class="lead mb-1">{{ message }}</p></li>
                {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}
        {% endwith %}
    </div>
    <form method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="row my-2">
            <div class="col">
                <div class="form-floating">
                    <input id="peptide_string" name="peptide_string" class="form-control" minlength="2" aria-describedby="PeptideHelp" type="text" value="{{ data.get('peptide_string', '') }}"  required>
                    <label for="peptide_string" class="form-label">Peptide Sequence</label>
                    <div id="PeptideHelp" class="form-text">A peptide sequence in single-letter-code, e.g. 'MGATYAFWRGT'. Only proteinogenic amino acids are allowed.</div>
                </div>
            </div>
        </div>
        {% if data.get('smiles') %}
        <div class="row mb-2">
            <div class="col">
                <h4 class="fw-semibold lh-2">SMILES String for Peptide Sequence</h4>
                <p><b>{{ data.get('smiles') | trim }}</b></p>
            </div>
        </div>
        {% endif %}
        <div class="row mb-2">
            <div class="col">
                <button type="submit" class="btn btn-primary">Generate SMILES string</button>
            </div>
        </div>
    </form>
</div>

{% endblock %}