{% extends "base.html" %}
{% block title %}{{ t('新建环境') if mode == 'create' else t('编辑环境') }} · {{ product_name }}{% endblock %}
{% block container_class %} container--form{% endblock %}
{% block content %}
<nav class="breadcrumb" aria-label="{{ t('面包屑') }}">
  <a href="/environments">{{ t('环境') }}</a><span aria-hidden="true">/</span>
  <span>{{ t('新建环境') if mode == 'create' else values.key }}</span>
</nav>
<div class="page-header">
  <div>
    <h1>{{ t('新建环境') if mode == 'create' else t('编辑环境') }}</h1>
  </div>
</div>

{% if errors.get('_form') %}
<div class="alert alert--danger" role="alert">
  <div class="alert__body"><strong>{{ t('保存失败') }}</strong><span class="alert__detail">{{ t(errors['_form']) }}</span></div>
</div>
{% endif %}

<div class="form-layout">
  <form class="form-main" method="post" action="{{ '/environments' if mode == 'create' else '/environments/' ~ environment.id }}">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <section class="card form-section">
      <div class="field{% if errors.get('title') %} field--invalid{% endif %}">
        <label class="field__label" for="field-title">{{ t('展示名') }}<span class="required" aria-hidden="true">*</span></label>
        <input class="input" id="field-title" name="title" value="{{ values.title }}" required aria-required="true"
               placeholder="{{ t('例如生产') }}" autocomplete="off"
               {% if errors.get('title') %}aria-invalid="true" aria-describedby="err-title"{% endif %}>
        {% if errors.get('title') %}<p class="field__error" id="err-title" role="alert">{{ t(errors.get('title')) }}</p>{% endif %}
      </div>
      <div class="field{% if errors.get('key') %} field--invalid{% endif %}">
        {% if mode == 'create' %}
        <label class="field__label" for="field-key">{{ t('调用标识') }}<span class="required" aria-hidden="true">*</span></label>
        <input class="input mono" id="field-key" name="key" value="{{ values.key }}" required aria-required="true"
               placeholder="prod" autocomplete="off" spellcheck="false"
               {% if errors.get('key') %}aria-invalid="true" aria-describedby="err-key"{% endif %}>
        {% else %}
        <span class="field__label">{{ t('调用标识') }}</span>
        <div class="readonly mono">{{ values.key }}</div>
        {% endif %}
        {% if errors.get('key') %}<p class="field__error" id="err-key" role="alert">{{ t(errors.get('key')) }}</p>{% endif %}
        <p class="field__hint">{% if mode == 'edit' and values.key == 'default' %}{{ t('调用标识是 default，不能改。要分开多套环境，请新建一个。') }}{% elif mode == 'edit' %}{{ t('创建后不能修改，排查时要传这个值。') }}{% else %}{{ t('小写字母、数字和连字符。创建后不能修改，排查时要传这个值。') }}{% endif %}</p>
      </div>
      <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.enabled %} checked{% endif %}>
          <span class="switch__track" aria-hidden="true"></span>
        </label>
        <p class="field__hint">{{ t('停用后不能查询这个环境，目标配置仍保留。') }}</p>
      </div>
    </section>
    <div class="form-actions">
      <a class="btn btn--secondary" href="/environments">{{ t('取消') }}</a>
      <button class="btn btn--primary" type="submit">{{ t('保存环境') if mode == 'create' else t('保存修改') }}</button>
    </div>
  </form>
</div>
{% endblock %}