{% extends "base.html" %}

{% block title %}Suggest a connection{% endblock %}

{% block content %}

<p>If you know about songs in the Final Fantasy XIV soundtrack that share a connection, and you can't find it on the website, tell me about it here. Just pick the two songs that share a motif - or the motif itself, if it already has a page - and tell me what to listen out for. Timestamps are especially helpful!</p>

<form action="/sent" method="post" >
    <div class="suggestbox">
        <div class="suggest-search">
            {% for i in range(2) %}
                <div class="suggest">
                    <h2>Song / Motif {{ i + 1 }}</h2>

                    <div id="connection-{{ i }}" class="suggest-search-results suggest-selection">
                        <div>Nothing selected yet.</div>
                    </div>
                    <div id="suggest-bar-{{ i }}" class="search-bar search-empty">
                        <button type="button" id="suggest-button-{{ i }}" class="search-clear hidden" onclick="clearSearch('search-input-suggest-{{ i }}', 'search-results-{{ i }}')">🗙</button>
                        <div class="search-items">
                            <input
                                id="search-input-suggest-{{ i }}"
                                type="text"
                                name="q"
                                autocomplete="off"
                                placeholder=" Search..."
                                hx-get="/suggestsearch"
                                hx-trigger="keyup changed delay:250ms, search"
                                hx-target="#search-results-{{ i }}"
                                oninput="searchIconChange(event, 'suggest-button-{{ i }}', 'suggest-bar-{{ i }}')"
                                keydown="return event.keyCode != 13;"
                            />
                            <div id="search-results-{{ i }}" class="search-results" data-form="{{ i }}"></div>
                        </div>
                    </div>
                </div>
                <input required type="text" name="connection-{{ i }}-desc" id="connection-{{ i }}-desc" class="search-number"/>
                <input required type="number" name="connection-{{ i }}-id" id="connection-{{ i }}-id" class="search-number"/>
            {% endfor %}
        </div>
        <div class="suggest-desc">
            <textarea maxlength="10000" rows="6" required name="suggest-description" placeholder="Describe the connection here."></textarea>
        </div>
        <div class="suggest-button">
            <input type="submit" value="Submit"/>
        </div>
    </div>

</form>

{% endblock %}