{% extends "../../base.html" %}

{% block head %}
    <script type="module" src="{{fix_static('js/quotes/create.js')}}"></script>
{% end %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="{{fix_static('css/form.css')}}">
{% end %}

{% block body %}
    <form method="post" action="{{fix_url('/zitate/erstellen')}}">
        <label class="form-element">
            Zitat
             <input name="quote-1"
                    list="quote-list"
                    autocomplete="on"
                    id="quote-input"
             {% if selected_quote %}
                    value="{{selected_quote.quote}}"
             {% end %}
                    type="text">
        </label>

        <label class="form-element">
            Richtiger Autor
            <input name="real-author-1"
                   list="author-list"
                   autocomplete="on"
                   id="real-author-input"
            {% if selected_quote %}
                   value="{{selected_quote.author.name}}"
            {% end %}
                   type="text">
        </label>

        <label class="form-element">
            Falscher Autor
            <input name="fake-author-1"
                   list="author-list"
                   autocomplete="on"
            {% if selected_author %}
                   value="{{selected_author.name}}"
            {% end %}
                   type="text">
        </label>

        <label class="form-element">
            Dein Name (Optional)! Dieser Name wird an <a
                href="{{fix_url('https://zitate.prapsschnalinen.de')}}"
            >Drittanbieter</a> weitergeleitet.
            <input name="user-name" type="text">
        </label>

        <datalist id="quote-list">
            {% for q in quotes %}
                <option value="{{q.quote.strip()}}"
                        data-author="{{q.author.name.strip()}}">
            {% end %}
        </datalist>
        <datalist id="author-list">
            {% for a in authors %}
                <option value="{{a.name.strip()}}">
            {% end %}
        </datalist>

        <input type="text" class="hidden" name="keine-aktion" value="">

        <input id="submit-button" class="button" type="submit" value="Ausgewählte Daten einreichen">
    </form>
{% end %}
