{% extends "base.html" %}
{% block content %}
    <div class="container">
        <h1 class="my-4">Add Discord Webhook</h1>
        <div class="card card-body mb-3">
            Webhooks will be saved in a cookie and will be sent to the server when you subscribe to a drop.
        </div>
        <div>
            <form method="post" class="needs-validation" novalidate>
                {% csrf_token %}
                {{ form.non_field_errors }}
                <div class="mb-3">
                    {{ form.webhook_url.errors }}
                    <label for="{{ form.webhook_url.id_for_label }}" class="form-label">{{ form.webhook_url.label }}</label>
                    <input type="url"
                           name="webhook_url"
                           required=""
                           class="form-control"
                           aria-describedby="id_webhook_url_helptext"
                           id="id_webhook_url">
                    <div class="form-text text-muted">{{ form.webhook_url.help_text }}</div>
                </div>
                <button type="submit" class="btn btn-primary">Add Webhook</button>
            </form>
        </div>
        <h2 class="mt-5">Webhooks</h2>
        {% if webhooks %}
            <div class="list-group">
                {% for webhook in webhooks %}
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <span>
                            {% if webhook.avatar %}
                                <img src="https://cdn.discordapp.com/avatars/{{ webhook.id }}/a_{{ webhook.avatar }}.png"
                                     alt="Avatar of {{ webhook.name }}"
                                     class="rounded-circle"
                                     height="32"
                                     width="32">
                            {% endif %}
                            <a href="https://discord.com/api/webhooks/{{ webhook.id }}/{{ webhook.token }}"
                               target="_blank"
                               class="text-decoration-none">{{ webhook.name }}</a>
                        </span>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-info">No webhooks added</div>
        {% endif %}
    </div>
{% endblock content %}