{% extends 'base.html' %}

{% block title %}App{% endblock title %}

{% block content %}

{% load static %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="main">
    <div class="card">
        <h2>Simple URL Shortener</h2>
    </div>

    <div id="app" class="card">
        <form onsubmit="formSubmit(this)" method="POST" action="/shorten">
            {% csrf_token %}
            <div class="input-container">
                <label>
                    Alias
                    {{ form.alias }}
                </label>
            </div>

            <div class="input-container">
                <label>
                    Long URL
                    {{ form.long_url }}
                </label>
            </div>

            <div class="input-container">
                <input type="submit" value="Shorten!">
            </div>
        </form>
    </div>

    <div id="output" class="card">
        <h3>Shortened URL</h3>
        <a href=""></a>
    </div>
    

    <div class="card">
        <h3>Github Repository: <a href="//github.com/ethmtrgt/url_shortener">ethmtrgt/url_shortener</a></h3>
    </div>
</div>

<script src="{% static 'js/script.js' %}"></script>
{% endblock content %}