{% extends "header.html" %}
{% block content %}
<div>
    <h1>Welcome to Clipper</h1>
    <p>Clipper allows you to create and share text or files through unique URLs.<br/><br/>Simply enter a name for your route below and get started!</p>

    <form id="create-route-form" method="post" action="{% url 'create_clip' %}" style="display: flex; justify-content: center; flex-direction:column;max-width:480px;margin:0 auto;padding-top:20px;">
        {% csrf_token %}
        <input class="home-input" type="text" id="route-name" name="subpath" placeholder="myclip" required><br>
        {% if messages %}
        <div class="messages">
            {% for message in messages %}
                <p{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</p>
            {% endfor %}
        </div>
        {% endif %}
        <button type="submit">Get started</button>
    </form>
</div>
{% endblock %}