{% extends "base.html" %}
{% from "_macros.html" import env_label %}
{% block title %}{{ t('环境') }} · {{ product_name }}{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1>{{ t('环境') }}</h1>
    <p class="page-subtitle">{{ t('展示名可以改，调用标识创建后不能改。') }}</p>
  </div>
  <a class="btn btn--primary" href="/environments/new" data-dialog-open="env-drawer">{{ t('新建环境') }}</a>
</div>

{% if not environments %}
<section class="empty">
  <h2>{{ t('还没有环境') }}</h2>
  <p>{{ t('新建一个环境后，再回到目标里登记 MySQL、日志和其他系统。') }}</p>
  <a class="btn btn--primary" href="/environments/new" data-dialog-open="env-drawer">{{ t('新建环境') }}</a>
</section>
{% else %}
<div class="table-card">
  <table class="table table--responsive table--share">
    <thead>
      <tr>
        <th scope="col">{{ t('展示名') }}</th>
        <th scope="col">{{ t('调用标识') }}</th>
        <th scope="col">{{ t('目标') }}</th>
        <th scope="col">{{ t('状态') }}</th>
        <th scope="col" class="cell-actions">{{ t('操作') }}</th>
      </tr>
    </thead>
    <tbody>
      {% for env in environments %}
      <tr>
        <td data-label="{{ t('展示名') }}" class="cell-fill"><a class="link-strong" href="/targets?env={{ env.key }}">{{ env_label(env) }}</a></td>
        <td data-label="{{ t('调用标识') }}" class="mono">{{ env.key }}</td>
        <td data-label="{{ t('目标') }}">{{ t('{count} 个目标', count=env.target_count) }}</td>
        <td data-label="{{ t('状态') }}">
          <form method="post" action="/environments/{{ env.id }}/toggle" class="inline-form">
            <input type="hidden" name="_csrf" value="{{ csrf_token }}">
            <button class="switch{% if env.enabled %} is-on{% endif %}" type="submit"
                    aria-pressed="{{ 'true' if env.enabled else 'false' }}"
                    title="{{ t('点击停用') if env.enabled else t('点击启用') }}">
              <span class="switch__track" aria-hidden="true"><span class="switch__thumb"></span></span>
              <span class="switch__label">{{ t('已启用') if env.enabled else t('已停用') }}</span>
            </button>
          </form>
        </td>
        <td data-label="{{ t('操作') }}" class="cell-actions">
          <div class="row-actions">
            <a class="btn btn--secondary btn--sm" href="/targets?env={{ env.key }}">{{ t('查看目标') }}</a>
            <a class="btn btn--ghost btn--sm" href="/environments/{{ env.id }}/edit">{{ t('编辑') }}</a>
            {% if env.target_count %}
            <span class="muted small">{{ t('有目标时不能删除') }}</span>
            {% else %}
            <button class="btn btn--danger-ghost btn--sm" type="button" data-dialog-open="delete-env-{{ env.id }}">{{ t('删除') }}</button>
            {% endif %}
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% for env in environments if not env.target_count %}
<dialog id="delete-env-{{ env.id }}" class="modal" aria-labelledby="delete-env-title-{{ env.id }}">
  <div class="modal__panel">
    <button class="modal__close" type="button" data-dialog-close aria-label="{{ t('关闭') }}">×</button>
    <h2 id="delete-env-title-{{ env.id }}">{{ t('删除环境') }}</h2>
    <p class="field__hint">{{ t('删除 {title}（{key}）。这个环境里没有目标。', title=env_label(env), key=env.key) }}</p>
    <form method="post" action="/environments/{{ env.id }}/delete" class="form-actions form-actions--inline">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <button class="btn btn--secondary" type="button" data-dialog-close>{{ t('取消') }}</button>
      <button class="btn btn--danger" type="submit">{{ t('确认删除') }}</button>
    </form>
  </div>
</dialog>
{% endfor %}
{% endif %}
{% set env_return = 'environments' %}
{% include "_environment_drawer.html" %}
{% endblock %}