{% extends 'metenox/base.html' %}
{% load i18n %}
{% block content %}
    <h3>
        {% blocktranslate with corporation_name=corporation.corporation_name trimmed %}
            Add a new webhook to corporation "{{ corporation_name }}"
        {% endblocktranslate %}
    </h3>
    <br>
    <h4>{% translate 'Add a new webhook:' %}</h4>
    {% translate 'This method will create a brand new webhook on the auth.' %}
    <form method="post"
          action="{% url "metenox:add_corporation_webhook" corporation.pk %}">
        {% csrf_token %}
        <input type="hidden" name="type" value="new">
        <div class="mb-3">
            <label for="webhook_name">{% translate "Webhook's name:" %}</label>
            <input type="text"
                   size="30"
                   name="webhook_name"
                   id="webhook_name"
                   aria-describedby="webhookNameHelp"
                   required>
            <div id="webhookNameHelp" class="form-help">
                {% translate 'This name will be assigned to ease finding the webhook back' %}
            </div>
        </div>
        <div class="mb-3">
            <label for="webhook_url">{% translate "Enter the webhook's url:" %}</label>
            <input type="text"
                   size="80"
                   name="webhook_url"
                   id="webhook_url"
                   pattern="https:\/\/discord.com\/api\/webhooks\/\d+\/.+"
                   title="https://discord.com/api/webhooks/<id>/<token>"
                   required>
                <span class="validity"></span>
            </div>
            <button class="btn btn-primary" type="submit">{% translate 'Create webhook' %}</button>
        </form>
        <div class="p-4"></div>
        <h4>{% translate 'Add an existing webhook:' %}</h4>
        {% blocktranslate trimmed %}
            This method allows to add a webhook already present in the auth.
            You only need to enter the webhook's id.
        {% endblocktranslate %}
        <form method="post"
              action="{% url "metenox:add_corporation_webhook" corporation.pk %}">
            {% csrf_token %}
            <input type="hidden" name="type" value="existing">
            <div class="mb-3">
                <label for="webhook_id">{% translate "Webhook's id:" %}</label>
                <input type="number" size="20" id="webhook_id" name="webhook_id" required>
            </div>
            <button class="btn btn-primary" type="submit">{% translate 'Create webhook' %}</button>
        </form>
    {% endblock %}
    {% block extra_css %}
        {{ block.super }}
        <style>
        input + span {
            padding-right: 30px;
        }

        input:invalid + span::after {
            position: absolute;
            content: "✖";
            padding-left: 5px;
        }

        input:valid + span::after {
            position: absolute;
            content: "✓";
            padding-left: 5px;
        }
        </style>
    {% endblock %}