{%- extends "base.html" %}

{% block content %}
    {{ super() }}
    <div class="container-fluid d-flex justify-content-center" style="width: fit-content(100%); padding: 1.5%">
        <div class="card">
            <div class="card-body">
                <form method="POST" class="form-group">
                    {{ form.csrf_token }}
                    <div class="container-fluid" style="width: fit-content">
                        <div class="row" style="width: fit-content">
                            {{ form.url.label(class_="form-label") }}
                        </div>
                        <div class="row" style="width: fit-content">
                            {{ form.url(class_="form-control") }}
                        </div>
                        <br>
                        <div class="row" style="width: fit-content">
                            <div class="col-md-auto">
                                    {{ form.ext(class_="form-select") }}
                            </div>
                            <div class="col-md-auto">
                                {{ form.submit(class_="btn btn-primary") }}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {% if form.errors %}
        {{ form.errors['url'][0][:-1] + ', try again.' }}
        {% endif %}

        {% if not ytLink %}
            Please enter a full, valid YouTube URL.
        {% endif %}

    </div>
{%- endblock %}