{% from "components.html" import closer, scrim with context %}
{% macro number(name, label, unit, low, high) -%}
    <label class="field">
        <span class="field__label">{{ label }}</span>
        <span class="field__box">
            <input class="field__input"
                   type="number"
                   name="{{ name }}"
                   value="{{ form.values[name] }}"
                   min="{{ low }}"
                   max="{{ high }}"
                   required>
            <span class="field__unit">{{ unit }}</span>
        </span>
        <span class="field__error">required</span>
    </label>
{%- endmacro %}
{% macro select(name, label, options) -%}
    <label class="field">
        <span class="field__label">{{ label }}</span>
        <select class="field__box field__select" name="{{ name }}">
            {% for option in options %}
                <option value="{{ option.value }}"
                        {% if option.selected %}selected{% endif %}>{{ option.label }}</option>
            {% endfor %}
        </select>
    </label>
{%- endmacro %}
{{ scrim("/profiles") }}
<section class="panel panel--dialog panel--register"
         role="dialog"
         aria-label="{{ form.title }}">
    <header class="panel__header">
        <div class="panel__title">
            <h2 class="panel__name">{{ form.title }}</h2>
            {{ closer("/profiles") }}
        </div>
        <p class="panel__facts">{{ form_note }}</p>
    </header>
    <form class="dialog"
          method="post"
          action="{{ form.action }}"
          hx-post="{{ form.action }}"
          hx-target="#overlay">
        <input type="hidden" name="mode" value="{{ form.mode }}">
        <input type="hidden" name="source" value="{{ form.source }}">
        <div class="dialog__body">
            <div class="dialog__fields">
                <label class="field">
                    <span class="field__label">Name</span>
                    <span class="field__box">
                        <input class="field__input"
                               type="text"
                               name="name"
                               value="{{ form.name }}"
                               placeholder="build-medium"
                               {% if form.mode == "edit" %}readonly{% else %}required{% endif %}>
                    </span>
                    <span class="field__error">required · a unique profile name</span>
                    <span class="field__hint">
                        {% if form.mode == "edit" %}
                            the name stays; only the spec changes
                        {% else %}
                            letters, digits, . _ and -; unique — the id is generated by the api
                        {% endif %}
                    </span>
                </label>
                <div class="dialog__row">
                    {{ number('cpu', 'CPU', 'cpu', 1, 64) }}
                    {{ number('memory_mib', 'Memory', 'MiB', 256, 262144) }}
                    {{ number('disk_gib', 'Disk', 'GiB', 1, 2048) }}
                </div>
                <h3 class="run__card-title profile__section">GATES · POLICIES</h3>
                <div class="dialog__grid">{% for gate in gates %}{{ select(gate.name, gate.label, gate.options) }}{% endfor %}</div>
                <span class="field__hint">{{ gates_note }}</span>
                <div class="dialog__grid">
                    {{ select("merge", "Merge policy", merges) }}
                    {{ number('timeout', 'Timeout', 's', 60, 86400) }}
                </div>
            </div>
            {% if notice %}<p class="dialog__error">{{ notice }}</p>{% endif %}
        </div>
        <footer class="dialog__footer dialog__footer--end">
            <div class="dialog__actions">
                <a class="button button--outline"
                   href="/profiles"
                   {% if not standalone %}hx-get="/overlay/close" hx-target="#overlay"{% endif %}>Cancel</a>
                <button class="button" type="submit">{{ form.submit }}</button>
            </div>
        </footer>
    </form>
</section>