{#
  SamplePlugin の独自管理画面を Twig で書いたサンプル。

  - acms_config({ blogId: BID }) でコンフィグを Twig 側で参照する
  - 純粋に保存済み値だけ参照したい場合は config.persisted.get(...) を使う
  - 保存通知 (config.saved / config.notice)・バリデーション (config.posted / config.valid /
    config.invalid / config.errors) も Twig 側で取得可能

  バリデーションの書き方は a-blog cms 標準フォームと同じ形式に揃える:
    <input type="hidden" name="config[]" value="key">                                ← 保存対象キー
    <input type="hidden" name="key:validator#method" id="validator-key-method">      ← バリデータ宣言
    <div role="alert" aria-live="assertive">
      <div data-validator-label="validator-key-method"
           class="validator-result-{{ config.invalid('key','method') ? '0' : '1' }}">
        <p class="error-text">...</p>
      </div>
    </div>
#}
{% set config = acms_config({ blogId: BID }) %}

<header>
  <div>
    @include("/admin/topicpath.html")
  </div>
  <div>
    <h1 class="acms-admin-admin-title js-dialog-title">
      SamplePlugin 設定
    </h1>
  </div>
  <div class="acms-admin-col-md-6">
  </div>
</header>

{% if config.saved %}
<div role="alert" class="acms-admin-alert acms-admin-alert-info acms-admin-alert-icon">
  <span class="acms-admin-icon acms-admin-icon-news acms-admin-alert-icon-before" aria-hidden="true"></span>
  SamplePlugin 設定を保存しました
  <button
    type="button"
    class="js-acms-alert-close acms-admin-alert-icon-after acms-admin-margin-right-mini"
    aria-label="アラートを閉じる"
  >
    ×
  </button>
</div>
{% endif %}

{% if config.posted and not config.valid %}
<div role="alert" class="acms-admin-alert acms-admin-alert-danger acms-admin-alert-icon">
  <span class="acms-admin-icon acms-admin-icon-attention acms-admin-alert-icon-before" aria-hidden="true"></span>
  入力内容に誤りがあります
  {% if config.errors %}
    <ul>
      {% for field, methods in config.errors %}
        <li>{{ field }}: {{ methods|join(', ') }}</li>
      {% endfor %}
    </ul>
  {% endif %}
</div>
{% endif %}

<form action="" method="post" class="acms-admin-form">
  <div class="js-acms_fix_marker acms_fix_bg">
    <div class="acms_fix_bg_index">
      <button
        type="submit"
        name="ACMS_POST_Config"
        class="acms-admin-btn-admin acms-admin-btn-admin-primary acms-admin-btn-admin-save js-saving-splash"
      >
        保存
      </button>
    </div>
  </div>

  <section>
    <h2 class="acms-admin-admin-title2">基本設定</h2>
    <div class="acms-admin-stack acms-admin-flex-column acms-admin-align-items-stretch" style="--acms-admin-stack-spacing: 1rem;">
      <div class="acms-admin-cssgrid">
        <div class="acms-admin-g-col-12 acms-admin-g-col-sm-2">
          <label for="sample_config_text" class="acms-admin-col-form-label">
            サンプルテキスト<i class="acms-admin-icon-tooltip acms-admin-ms-1 js-acms-tooltip-hover" data-acms-tooltip="必須・最大 50 文字"></i>
          </label>
        </div>
        <div class="acms-admin-g-col-12 acms-admin-g-col-sm-10">
          <input
            id="sample_config_text"
            type="text"
            name="sample_config_text"
            value="{{ config.get('sample_config_text') }}"
            class="acms-admin-form-width-medium"
          />
          <input type="hidden" name="config[]" value="sample_config_text" />
          <input type="hidden" name="sample_config_text:validator#required" value="true" id="validator-sample_config_text-required" />
          <input type="hidden" name="sample_config_text:validator#maxlength" value="50" id="validator-sample_config_text-maxlength" />
          <div role="alert" aria-live="assertive">
            <div data-validator-label="validator-sample_config_text-required" class="validator-result-{{ config.invalid('sample_config_text', 'required') ? '0' : '1' }}">
              <p class="error-text"><span class="acms-admin-icon acms-admin-icon-attention" aria-hidden="true"></span>サンプルテキストを入力してください</p>
            </div>
            <div data-validator-label="validator-sample_config_text-maxlength" class="validator-result-{{ config.invalid('sample_config_text', 'maxlength') ? '0' : '1' }}">
              <p class="error-text"><span class="acms-admin-icon acms-admin-icon-attention" aria-hidden="true"></span>50 文字以内で入力してください</p>
            </div>
          </div>
        </div>
      </div>
      <div class="acms-admin-cssgrid">
        <div class="acms-admin-g-col-12 acms-admin-g-col-sm-2">
          <label for="sample_config_email" class="acms-admin-col-form-label">
            メールアドレス<i class="acms-admin-icon-tooltip acms-admin-ms-1 js-acms-tooltip-hover" data-acms-tooltip="必須・メール形式"></i>
          </label>
        </div>
        <div class="acms-admin-g-col-12 acms-admin-g-col-sm-10">
          <input
            id="sample_config_email"
            type="text"
            name="sample_config_email"
            value="{{ config.get('sample_config_email') }}"
            class="acms-admin-form-width-medium"
          />
          <input type="hidden" name="config[]" value="sample_config_email" />
          <input type="hidden" name="sample_config_email:validator#required" value="true" id="validator-sample_config_email-required" />
          <input type="hidden" name="sample_config_email:validator#email" value="true" id="validator-sample_config_email-email" />
          <div role="alert" aria-live="assertive">
            <div data-validator-label="validator-sample_config_email-required" class="validator-result-{{ config.invalid('sample_config_email', 'required') ? '0' : '1' }}">
              <p class="error-text"><span class="acms-admin-icon acms-admin-icon-attention" aria-hidden="true"></span>メールアドレスを入力してください</p>
            </div>
            <div data-validator-label="validator-sample_config_email-email" class="validator-result-{{ config.invalid('sample_config_email', 'email') ? '0' : '1' }}">
              <p class="error-text"><span class="acms-admin-icon acms-admin-icon-attention" aria-hidden="true"></span>メールアドレスの形式で入力してください</p>
            </div>
          </div>
        </div>
      </div>
      <div class="acms-admin-cssgrid">
        <div class="acms-admin-g-col-12 acms-admin-g-col-sm-2">
          <label for="sample_config_status" class="acms-admin-col-form-label">
            公開ステータス<i class="acms-admin-icon-tooltip acms-admin-ms-1 js-acms-tooltip-hover" data-acms-tooltip="open または close のいずれか (regex で whitelist)"></i>
          </label>
        </div>
        <div class="acms-admin-g-col-12 acms-admin-g-col-sm-10">
          <select id="sample_config_status" name="sample_config_status" class="acms-admin-form-width-medium">
            <option value="open" {{ config.selected('sample_config_status', 'open') }}>公開</option>
            <option value="close" {{ config.selected('sample_config_status', 'close') }}>非公開</option>
          </select>
          <input type="hidden" name="config[]" value="sample_config_status" />
        </div>
      </div>
    </div>
  </section>

  <section>
    <h2 class="acms-admin-admin-title2">通知設定</h2>
    <div class="acms-admin-stack acms-admin-flex-column acms-admin-align-items-stretch" style="--acms-admin-stack-spacing: 1rem;">
      <div class="acms-admin-cssgrid">
        <div class="acms-admin-g-col-12 acms-admin-g-col-sm-2">
          <label for="sample_config_mail" class="acms-admin-col-form-label">
            メールマガジン<i class="acms-admin-icon-tooltip acms-admin-ms-1 js-acms-tooltip-hover" data-acms-tooltip="ON / OFF"></i>
          </label>
        </div>
        <div class="acms-admin-g-col-12 acms-admin-g-col-sm-10">
          <input type="hidden" name="sample_config_mail" value="off">
          <div class="acms-admin-form-checkbox">
            <input
              type="checkbox"
              name="sample_config_mail"
              value="on"
              {{ config.checked('sample_config_mail', 'on') }}
              id="sample_config_mail"
            >
            <label for="sample_config_mail"><i class="acms-admin-ico-checkbox"></i>受け取る</label>
          </div>
          <input type="hidden" name="config[]" value="sample_config_mail" />
        </div>
      </div>
    </div>
  </section>
</form>
