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

{% block head %}
    <script defer type="module" src="{{fix_static('js/currency_converter/converter.js')}}"></script>
{% end %}
{% block stylesheets %}
    <style>.invalid{color:var(--contrast-2)}</style>
    <link rel="stylesheet" type="text/css"
          href="{{fix_static('css/form.css')}}">
{% end %}

{% block body %}
    <form action="{{fix_url(canonical_url)}}" method="get" id="form">
        <label class="form-element">
            Euro:
            <input pattern="^(?:\d+|(?:\d+)?[,.]\d{1,2}|\d+[,.](?:\d{1,2})?)?$"
                   type="text"
                   id="euro"
                   name="euro"
                   placeholder="{{euro_str}}">
        </label>

        <label class="form-element">
            D-Mark:
            <input pattern="^(?:\d+|(?:\d+)?[,.]\d{1,2}|\d+[,.](?:\d{1,2})?)?$"
                   type="text"
                   id="mark"
                   name="mark"
                   placeholder="{{mark_str}}">
        </label>

        <label class="form-element">
            Ostmark:
            <input pattern="^(?:\d+|(?:\d+)?[,.]\d{1,2}|\d+[,.](?:\d{1,2})?)?$"
                   type="text"
                   id="ost"
                   name="ost"
                   placeholder="{{ost_str}}">
        </label>

        <label class="form-element">
            Ostmark auf dem Schwarzmarkt:
            <input pattern="^(?:\d+|(?:\d+)?[,.]\d{1,2}|\d+[,.](?:\d{1,2})?)?$"
                   type="text"
                   id="schwarz"
                   name="schwarz"
                   placeholder="{{schwarz_str}}">
        </label>

        {% raw form_appendix %}

        <input type="submit"
               id="submit"
               value="Eingabe!">
    </form>

    <br>

    <label class="form">
        Als Text:
        <textarea readonly id="output">{{text}}</textarea>
    </label>
{% end %}
