{% extends "layout.html.j2" %}

{% block scripts %}
<script async src="{{ url_for('static', path='tournament_form.js') }}" type="module"></script>
{% endblock%}

{% block content %}
<div>
    <form class="row g-3 needs-validation" id="tournamentForm" data-tournament='{{ tournament | tojson }}'>
        {# ----------------------------------------------------------------------------------------------- line 1 #}
        <div class="col-6">
            <input required type="text" class="form-control" id="tournamentName" name="name"
                placeholder="Tournament Name" spellcheck="false">
        </div>
        <div class="col-3">
            <select required class="form-select" id="selectFormat" name="format">
                <option selected value="Standard">Standard</option>
                <option value="Limited">Limited</option>
                <option value="Draft">Draft</option>
            </select>
        </div>
        <div class="col-3">
            <select class="form-select" id="selectRank" name="rank">
                <option selected value="">Tournament</option>
                <option value="National Championship">National Championship</option>
                <option value="Grand Prix">Grand Prix</option>
                <option value="Continental Championship">Continental Championship</option>
            </select>
        </div>
        {# ----------------------------------------------------------------------------------------------- line 2 #}
        <div class="col-md-2 d-flex align-items-center">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="switchProxy" name="proxies">
                <label class="form-check-label" for="switchProxy" id="switchProxyLabel">No Proxy</label>
            </div>
        </div>
        <div class="col-md-2 d-flex align-items-center">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="switchMultideck" name="multideck">
                <label class="form-check-label" for="switchMultideck" id="switchMultideckLabel">Single Deck</label>
            </div>
        </div>
        <div class="w-100"></div>
        {# ----------------------------------------------------------------------------------------------- line 3 #}
        <div class="col-md-2 d-flex align-items-center">
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="switchOnline" name="online">
                <label class="form-check-label" for="switchOnline">Online</label>
            </div>
        </div>
        <div class="col-md-4">
            <input type="text" class="form-control" aria-label="Venue" id="tournamentVenueName" name="venue"
                placeholder="Venue">
        </div>
        <div class="col-md-3">
            <select required class="form-select" aria-label="Country" id="selectCountry" name="country">
                <option selected value="">Country</option>
            </select>
        </div>
        <div class="col-md-3">
            <select disabled class="form-select" aria-label="City" id="selectCity" name="city">
                <option selected value="">City</option>
            </select>
        </div>
        {# ----------------------------------------------------------------------------------------------- line 4#}
        <div class="col-4">
            <div class="input-group">
                <i class="input-group-text bi bi-link-45deg"></i>
                <input type="text" class="form-control" id="tournamentVenueUrl" name="venue_url"
                    placeholder="Venue URL">
            </div>
        </div>
        <div class="col-4">
            <input type="text" class="form-control" id="tournamentAddress" name="address" placeholder="Address">
        </div>
        <div class="col-4">
            <div class="input-group">
                <i class="input-group-text bi bi-geo-alt-fill"></i>
                <input type="text" class="form-control" id="tournamentMapUrl" name="map_url" placeholder="Map URL">
            </div>
        </div>
        {# ----------------------------------------------------------------------------------------------- line 5 #}
        <div class="col-md-4">
            <div class="form-floating">
                <input required class="form-control" type="datetime-local" id="tournamentStart" name="start">
                <label class="form-label" for="tournamentStart">Start</label>
            </div>
        </div>
        <div class="col-md-4">
            <div class="form-floating">
                <input class="form-control" type="datetime-local" id="tournamentFinish" name="finish">
                <label class="form-label" for="tournamentFinish">Finish</label>
            </div>
        </div>
        {# ----------------------------------------------------------------------------------------------- line 6 #}
        <div class="position-relative col-12">
            <textarea class="form-control" id="tournamentDescription" rows="8" name="description"
                placeholder="Description"></textarea>
            <a href="https://www.markdownguide.org/basic-syntax/" target="_blank"
                class="btn btn-sm btn-outline-primary mb-2 me-3 position-absolute bottom-0 end-0">Markdown
                <i class="bi bi-question-circle-fill"></i>
            </a>
        </div>
        {# ----------------------------------------------------------------------------------------------- submit #}
        <div class="col-auto">
            <button type="submit" class="btn btn-primary mb-3" id="tournamentSubmit">Submit</button>
        </div>
    </form>
</div>
{% endblock %}