{% load strfilters %}
{% component_block "modal" id="modal_generate_api_key" start_open="true" title="Generate API Key" %}
{% fill "content" %}
<form class="py-4"
      id="modal_generate_api_key-form"
      hx-post="{% url 'core:api:settings:api_keys generate' %}"
      hx-swap="none">
    {% csrf_token %}
    <div class="form-control w-full">
        <label class="label justify-start">
            Key Name
            <span class="required_star">*</span>
        </label>
        <input id="modal_input-name"
               name="name"
               type="text"
               class="peer input input-block input-bordered invalid:[&:not(:placeholder-shown):not(:focus)]:input-error"
               required>
        <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
            <span class="label-text-alt text-error">Please enter a valid name for your key</span>
        </label>
    </div>
    <div class="form-control">
        <label class="label justify-start">
            Expires
            <span class="tooltip tooltip-primary tooltip-right ml-2"
                  data-tip="When should this token expire? Leave blank for no expiry.">
                <i class="fa fa-info-circle"></i>
            </span>
        </label>
        <input class="peer input input-bordered" name="expires" type="date" required>
    </div>
    <div class="form-control">
        <label class="label justify-start">Key Description</label>
        <textarea class="peer textarea textarea-bordered invalid:[&:not(:placeholder-shown):not(:focus)]:textarea-error"
                  minlength="3"
                  maxlength="255"
                  name="description"></textarea>
        <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
            <span class="label-text-alt text-error">Please enter a message between 3 and 255 characters.</span>
        </label>
    </div>
    {% if request.user.is_superuser %}
        <div class="form-control w-full">
            <label class="label">Administrator Connection?</label>
            <div class="grid grid-cols-8 gap-4 items-center">
                <input id="modal_input-administrator"
                       name="administrator"
                       type="checkbox"
                       class="peer checkbox checkbox-block checkbox-bordered">
                <select name="administrator_type"
                        class="select select-bordered col-span-7 w-full">
                    {% for option in APIAuthToken_types %}<option value="{{ option }}">{{ option.label }}</option>{% endfor %}
                </select>
            </div>
            <label class="label peer-[&amp;:not(:placeholder-shown):not(:focus):invalid]:block hidden">
                <span class="label-text-alt text-error">Please enter a valid name for your key</span>
            </label>
        </div>
    {% endif %}
    <div class="collapse collapse-arrow border select-bordered mt-4">
        <input type="checkbox" />
        <div class="collapse-title text-xl font-medium">Permissions</div>
        <div class="collapse-content">
            <ul class="block">
                {% for group in permissions %}
                    <li class="border-t-2 mt-2 p-2 flex items-center">
                        <div class="flex-auto">
                            <strong>{{ group.name | title | split:"_" | join:" " }}</strong>
                            <div class="text text-sm">{{ group.description }}</div>
                        </div>
                        <select class="select select-bordered inline-block position-relative"
                                name="permission_{{ group.name }}">
                            <option value="none" selected>No Access</option>
                            {% for item, readable in group.options.items %}
                                <option value="{{ item }}">{{ readable }}</option>
                            {% endfor %}
                        </select>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="form-control"></div>
    <div class="modal-action">
        <button type="submit"
                id="modal_generate_api_key-submit"
                class="btn btn-primary"
                _="on click if #modal_generate_api_key-form.checkValidity() call #modal_generate_api_key.close() end">
            Generate Key
        </button>
        <button type="button"
                _="on click call #modal_generate_api_key.close()"
                class="btn">Cancel</button>
    </div>
</form>
{% endfill %}
{% endcomponent_block %}
