{% extends "base.html" %}

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

{% block content %}

<p>If you know about a shared motif that you can't find on the website, you can 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.</p>

<form action="/sent" method="post" >
    <div class="suggestbox">
        <div class="search-items suggest">
            <h2>Song / Motif 1</h2>
            <input
                id="search-input-suggest-1"
                type="search"
                name="q"
                autocomplete="off"
                placeholder="Search..."
                hx-get="/suggestsearch"
                hx-trigger="keyup changed delay:500ms, search"
                hx-target="#search-results-1"
            />
            <div id="search-results-1" class="search-results"></div>
        </div>
        <input type="number" name="connection-1-desc" id="connection-1-desc"/>
        <input type="number" name="connection-1" id="connection-1" min="1" max="733"/>
            
        <div class="suggest-desc">
            <textarea name="suggest-description">
                Suggest a different connection!
            </textarea>
        </div>
        <div class="suggest-button">
            <input type="submit" />
        </div>
    </div>

</form>


{% endblock %}