{% extends "base.html" %}
{% from "_macros.html" import option_field, secret_field, number_field, env_label, env_label_existing %}
{% block title %}{{ t("新建目标") if mode == "create" else t("编辑目标") }} · {{ product_name }}{% endblock %}
{% block container_class %} container--form{% endblock %}
{% block content %}
{% set connection_rows = option_rows | selectattr("section", "equalto", "connection") | list %}
{% set connection_secrets = secret_rows | selectattr("section", "equalto", "connection") | list %}
{% set scope_rows = option_rows | selectattr("section", "equalto", "scope") | list %}
{% set advanced_rows = option_rows | selectattr("section", "equalto", "advanced") | list %}
{% set advanced_secrets = secret_rows | selectattr("section", "equalto", "advanced") | list %}
{% set advanced_open = (advanced_rows | selectattr("error") | list | length) or (advanced_secrets | selectattr("error") | list | length) or (common_rows | selectattr("error") | list | length) %}

<nav class="breadcrumb" aria-label="{{ t('面包屑') }}">
  <a href="/targets">{{ t('目标') }}</a><span aria-hidden="true">/</span>
  <span>{{ t(spec.label) }}{% if mode == "edit" %} · {{ existing.name }}{% endif %}</span>
</nav>
<div class="page-header">
  <div>
    <h1>{{ t("新建目标") if mode == "create" else t("编辑目标") }}</h1>
    <p class="page-subtitle">{{ t(spec.label) }} · {{ t("配置连接、密钥与只读范围。") }}</p>
  </div>
  <div class="page-header__actions">
    <span class="badge badge--type">{{ t(spec.label) }}</span>
    {% if mode == "create" %}<a class="btn btn--ghost btn--sm" href="/targets/new">{{ t('切换类型') }}</a>{% endif %}
  </div>
</div>

{% if errors.get("_form") %}
<div class="alert alert--danger" role="alert">
  <span class="alert__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 16.5v.5"/></svg>
  </span>
  <div class="alert__body"><strong>{{ t('保存失败') }}</strong><span class="alert__detail">{{ t(errors["_form"]) }}</span></div>
</div>
{% endif %}
{% if errors and errors.keys() | reject("equalto", "_form") | list %}
<div class="alert alert--danger" role="alert">
  <span class="alert__icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 16.5v.5"/></svg>
  </span>
  <div class="alert__body">
    <strong>{{ t("有 {count} 处需要修改", count=errors.keys() | reject("equalto", "_form") | list | length) }}</strong>
    <ul class="alert__list">
      {% for key, message in errors.items() if key != "_form" %}
      <li><a href="#err-{{ key }}">{{ t(message) }}</a></li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endif %}
<div class="form-layout">
  <form class="form-main" method="post" data-submit-loading data-async-form data-target-form data-leave-guard
        data-probe-url="{{ probe_url }}"
        data-probe-timeout-ms="{{ probe_timeout_ms }}"
        data-gate-baseline="{{ 'saved' if mode == 'edit' else 'none' }}"
        data-gate-hint-pending="{{ t('请先测试连接') }}"
        data-gate-hint-clean="{{ t('已通过连接测试，可以保存。') }}"
        data-gate-hint-saved="{{ t('连接未修改，可以直接保存。') }}"
        data-gate-hint-dirty="{{ t('配置已修改，请重新测试连接。') }}"
        data-probe-ok-title="{{ t('连接测试通过') }}"
        data-probe-fail-title="{{ t('连接测试失败') }}"
        data-duration-label="{{ t('耗时') }}"
        action="{{ '/targets' if mode == 'create' else '/targets/' ~ existing.id }}">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    {% if mode == "create" %}<input type="hidden" name="type" value="{{ spec.type }}">{% endif %}

    <section class="card form-section">
      <h2 class="form-section__title">{{ t('基本信息') }}</h2>
      {% if mode == "create" %}
      <div class="field{% if errors.get('environment') %} field--invalid{% endif %}" data-environment-field>
        {% if environments|length <= 1 %}
        <span class="field__label">{{ t('所属环境') }}</span>
        <div class="readonly" data-environment-label>{{ env_label(environments[0]) if environments else t('还没有环境') }}{% if environments %} <span class="mono">{{ environments[0].key }}</span>{% endif %}</div>
        <input type="hidden" name="environment" value="{{ values.get('environment', '') }}">
        {% else %}
        <label class="field__label" for="field-environment">{{ t('所属环境') }}<span class="required" aria-hidden="true">*</span></label>
        <select class="input select" id="field-environment" name="environment" required aria-required="true" data-gate="off"
                {% if errors.get('environment') %}aria-invalid="true" aria-describedby="err-environment"{% endif %}>
          {% for env in environments %}
          <option value="{{ env.key }}"{% if values.get('environment') == env.key %} selected{% endif %}>{{ env_label(env) }} · {{ env.key }}</option>
          {% endfor %}
        </select>
        {% endif %}
        {% if errors.get('environment') %}<p class="field__error" id="err-environment" role="alert">{{ t(errors.get('environment')) }}</p>{% endif %}
        <p class="field__hint">{{ t('保存后不能更换环境。') }}{% if environments|length <= 1 %} <a href="/environments/new" data-dialog-open="env-drawer">{{ t('新建环境') }}</a>{% endif %}</p>
      </div>
      {% else %}
      <div class="field">
        <span class="field__label">{{ t('所属环境') }}</span>
        <div class="readonly">{{ env_label_existing(existing) }} <span class="mono">{{ existing.environment_key }}</span></div>
        <p class="field__hint">{{ t('创建后不能更换环境。') }}</p>
      </div>
      {% endif %}
      {% if mode == "create" %}
      <div class="field">
        <label class="field__label" for="field-name">{{ t('名称') }}<span class="required" aria-hidden="true">*</span></label>
        <input class="input" type="text" id="field-name" name="name" value="{{ values.get('name', '') }}"
               placeholder="{{ t('例如 order-mysql') }}" autocomplete="off" spellcheck="false"
               required aria-required="true" data-gate="off">
        <p class="field__hint">{{ t('小写字母、数字与连字符，创建后不可修改；排查时传这个名字。') }}</p>
      </div>
      {% else %}
      <div class="field">
        <span class="field__label">{{ t('名称') }}</span>
        <div class="readonly mono">{{ existing.name }}</div>
        <p class="field__hint">{{ t('创建后不可修改。') }}</p>
      </div>
      {% endif %}
      <div class="field">
        <label class="switch-row" for="enabled">
          <span class="field__label">{{ t('启用') }}</span>
          <input class="switch__input" type="checkbox" id="enabled" name="enabled"{% if values.get('enabled') %} checked{% endif %} data-gate="off">
          <span class="switch__track" aria-hidden="true"></span>
        </label>
        <p class="field__hint">{{ t('停用后不能使用该目标，配置会保留。') }}</p>
      </div>
    </section>

    <section class="card form-section">
      <h2 class="form-section__title">{{ t('连接') }}</h2>
      <p class="form-section__desc">{{ t('主机、账号、密钥、TLS 或超时变化后，需要重新测试才能保存。') }}</p>
      <div class="form-grid">
        {% for row in connection_rows %}{{ option_field(row) }}{% endfor %}
        {% for row in connection_secrets %}{{ secret_field(row) }}{% endfor %}
      </div>
    </section>

    {% if scope_rows %}
    <section class="card form-section">
      <h2 class="form-section__title">{{ t('授权范围') }}</h2>
      <p class="form-section__desc">{{ t('只会查询这里列出的范围。留空时按该项自己的默认处理。') }}</p>
      <div class="form-grid">
        {% for row in scope_rows %}{{ option_field(row) }}{% endfor %}
      </div>
    </section>
    {% endif %}

    {% if advanced_rows or advanced_secrets or common_rows %}
    <details class="card form-section form-advanced"{% if advanced_open %} open{% endif %}>
      <summary class="form-section__title">{{ t('高级设置') }}<span class="form-advanced__hint">{{ t('TLS、证书、运行限制') }}</span></summary>
      <div class="form-advanced__body">
        {% if advanced_rows %}
        <h3 class="form-subsection__title">{{ t('安全连接') }}</h3>
        <div class="form-grid">
          {% for row in advanced_rows %}{{ option_field(row) }}{% endfor %}
        </div>
        {% endif %}
        {% if advanced_secrets %}
        <div class="form-grid form-grid--top">
          {% for row in advanced_secrets %}{{ secret_field(row) }}{% endfor %}
        </div>
        {% endif %}
        <h3 class="form-subsection__title">{{ t('运行限制') }}</h3>
        <p class="form-section__desc">{{ t('这些上限作用于之后的工具调用。') }}</p>
        <div class="form-grid form-grid--three">
          {% for row in common_rows %}{{ number_field(row) }}{% endfor %}
        </div>
      </div>
    </details>
    {% endif %}

    <div class="probe-result" data-probe-result{% if not test_result %} hidden{% endif %}>
      <div class="alert {% if test_result %}alert--{{ 'success' if test_result.ok else 'danger' }}{% else %}alert--info{% endif %}" data-probe-alert role="{{ 'alert' if test_result and not test_result.ok else 'status' }}">
        <span class="alert__icon" aria-hidden="true" data-probe-icon="ok">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>
        </span>
        <span class="alert__icon" aria-hidden="true" data-probe-icon="fail">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 16.5v.5"/></svg>
        </span>
        <div class="alert__body">
          <strong data-probe-title>{% if test_result %}{{ t('连接测试通过') if test_result.ok else t('连接测试失败') }}{% else %}{{ t('未测试') }}{% endif %}</strong>
          <span class="alert__detail" data-probe-detail>{% if test_result and test_result.ok %}{{ t('连接测试通过，可以保存。') }}{% elif test_result and test_result.message %}{{ test_result.message }}{% endif %}</span>
          <span class="probe-result__meta" data-probe-meta>{% if test_result and test_result.checked_at_at %}{{ local_time(test_result.checked_at_at, true) }}{% elif test_result and test_result.checked_at %}{{ test_result.checked_at }}{% endif %}{% if test_result and test_result.duration_ms %} · {{ t('耗时') }} {{ test_result.duration_ms }} ms{% endif %}</span>
        </div>
      </div>
    </div>
    <p class="field__hint form-gate-hint" data-gate-hint>{% if mode == 'edit' %}{{ t('连接未修改，可以直接保存。') }}{% else %}{{ t('请先测试连接') }}{% endif %}</p>
    <div class="form-actions">
      <a class="btn btn--secondary" href="/targets">{{ t('取消') }}</a>
      <button class="btn btn--secondary" type="button" data-probe-button
              data-loading-label="{{ t('测试中…') }}">{{ t('测试连接') }}</button>
      <button class="btn btn--primary" type="submit" data-save-button
              data-loading-label="{{ t('保存中…') }}"
              {% if mode == 'create' %}disabled aria-disabled="true"{% endif %}>{{ t("创建目标") if mode == "create" else t("保存修改") }}</button>
    </div>
  </form>

  <aside class="form-aside">
    <section class="card card--aside">
      <h3>{{ t('填写说明') }}</h3>
      <p>{{ t(spec.note) }}</p>
      <details class="details">
        <summary>{{ t('密钥与证书') }}</summary>
        <p class="details__body">{{ t('编辑时留空表示不改；要更换就填新值。') }}</p>
      </details>
    </section>
  </aside>
</div>
{% if mode == "create" and environments|length <= 1 %}
{% set env_return = 'stay' %}
{% include "_environment_drawer.html" %}
{% endif %}
{% endblock %}