{% extends "base.html" %}
{% block content %}
<div class="stack">
  <div class="actions" style="justify-content:space-between; align-items:center;">
    <div>
      <h1>Groups: {{ profile_key }}</h1>
      <p class="muted">管理 region / selector / policy groups。当前版本以整表提交为主。</p>
    </div>
    <div class="actions">
      <a class="button secondary" href="/admin/profiles">Back</a>
      <a class="button" href="/admin/profiles/{{ profile_key }}/preview">Preview</a>
    </div>
  </div>

  <form method="post" action="/admin/profiles/{{ profile_key }}/groups" class="stack">
    {% for group in groups %}
    <div class="card">
      <input type="hidden" name="group_id" value="{{ group.id }}">
      <div class="grid-2">
        <div>
          <label>Name</label>
          <input name="group_name_{{ loop.index0 }}" value="{{ group.name }}">
        </div>
        <div>
          <label>Kind</label>
          <select name="group_kind_{{ loop.index0 }}">
            <option value="region" {% if group.group_kind == 'region' %}selected{% endif %}>region</option>
            <option value="selector" {% if group.group_kind == 'selector' %}selected{% endif %}>selector</option>
            <option value="policy" {% if group.group_kind == 'policy' %}selected{% endif %}>policy</option>
          </select>
        </div>
        <div>
          <label>Type</label>
          <select name="type_{{ loop.index0 }}">
            <option value="select" {% if group.type == 'select' %}selected{% endif %}>select</option>
            <option value="url-test" {% if group.type == 'url-test' %}selected{% endif %}>url-test</option>
          </select>
        </div>
        <div>
          <label>Order</label>
          <input name="order_index_{{ loop.index0 }}" value="{{ group.order_index }}">
        </div>
        <div>
          <label>Filter Regex</label>
          <input name="filter_regex_{{ loop.index0 }}" value="{{ group.filter_regex }}">
        </div>
        <div>
          <label>Tolerance</label>
          <input name="tolerance_{{ loop.index0 }}" value="{{ group.tolerance or '' }}">
        </div>
        <div>
          <label>URL</label>
          <input name="url_{{ loop.index0 }}" value="{{ group.url }}">
        </div>
        <div>
          <label>Interval</label>
          <input name="interval_{{ loop.index0 }}" value="{{ group.interval or '' }}">
        </div>
      </div>
      <div style="margin-top:12px;">
        <label>Proxies / Tokens</label>
        <textarea name="proxies_{{ loop.index0 }}">{% for item in group.proxies %}{{ item }}{% if not loop.last %}
{% endif %}{% endfor %}</textarea>
      </div>
      <div class="actions" style="margin-top:12px;">
        <label class="inline"><input type="checkbox" name="enabled_{{ loop.index0 }}" {% if group.enabled %}checked{% endif %} style="width:auto"> Enabled</label>
        <label class="inline"><input type="checkbox" name="delete_{{ loop.index0 }}" style="width:auto"> Delete</label>
      </div>
    </div>
    {% endfor %}

    <div class="card">
      <h2>New Group</h2>
      <div class="grid-2">
        <div>
          <label>Name</label>
          <input name="new_group_name" placeholder="🤖 AI">
        </div>
        <div>
          <label>Kind</label>
          <select name="new_group_kind">
            <option value="policy">policy</option>
            <option value="selector">selector</option>
            <option value="region">region</option>
          </select>
        </div>
        <div>
          <label>Type</label>
          <select name="new_group_type">
            <option value="select">select</option>
            <option value="url-test">url-test</option>
          </select>
        </div>
        <div>
          <label>Order</label>
          <input name="new_group_order_index" placeholder="{{ groups|length }}">
        </div>
        <div>
          <label>Filter Regex</label>
          <input name="new_group_filter_regex">
        </div>
        <div>
          <label>Tolerance</label>
          <input name="new_group_tolerance">
        </div>
        <div>
          <label>URL</label>
          <input name="new_group_url">
        </div>
        <div>
          <label>Interval</label>
          <input name="new_group_interval">
        </div>
      </div>
      <div style="margin-top:12px;">
        <label>Proxies / Tokens</label>
        <textarea name="new_group_proxies"></textarea>
      </div>
      <label class="inline" style="margin-top:12px;"><input type="checkbox" name="new_group_enabled" checked style="width:auto"> Enabled</label>
    </div>
    <div class="actions">
      <button type="submit">Save Groups</button>
    </div>
  </form>
</div>
{% endblock %}