{% extends '@setup/install/layout.twig' %}
{% import '@setup/macros/csrf.twig' as csrf %}
{% import '@setup/install/steppath.twig' as nav %}

{% block stepPath %}{{ nav.render(5) }}{% endblock %}

{% block main %}
  {% if screen == 'result' %}
    <h2>セットアップが完了しました</h2>
    <h3>設定した項目</h3>
    <dl>
      <dt>ブログの名前</dt><dd><img src="./img/checkIcon2.gif" alt="" width="13" height="12" /> {{ fields.blog_name }}</dd>
      <dt>ブログのテーマ</dt><dd><img src="./img/checkIcon2.gif" alt="" width="13" height="12" /> {{ fields.select_theme }}</dd>
      <dt>ユーザー名</dt><dd><img src="./img/checkIcon2.gif" alt="" width="13" height="12" /> {{ fields.user_name }}</dd>
      <dt>メールアドレス</dt><dd><img src="./img/checkIcon2.gif" alt="" width="13" height="12" /> {{ fields.user_mail }}</dd>
      <dt>ユーザーID</dt><dd><img src="./img/checkIcon2.gif" alt="" width="13" height="12" /> {{ fields.user_code }}</dd>
    </dl>
    <form action="" method="post" class="acms-form acms-admin-form form-box">
      {{ csrf.field(setupFormToken) }}
      <p>インストールを完了すると、セキュリティのため <strong>setup ディレクトリを削除</strong>します。</p>
      <p>※ メンテナンスが必要になった場合は、配布物の setup を再アップロードしてください。</p>
      <p>
        <input type="hidden" name="do" value="true" />
        <input type="hidden" name="phase" value="6" />
        <input type="submit" name="submit" value="インストールを完了する（setup を削除）" class="acms-admin-btn acms-admin-btn-info acms-admin-btn-large" />
      </p>
    </form>
    <p>ログインURL ： <a href="{{ httpRoot }}{{ loginSegment }}/">{{ httpRoot }}{{ loginSegment }}/</a></p>

  {% else %}
    <h2><img src="./img/step5b.gif" width="24" height="24" alt="" />ブログとユーザーの設定</h2>
    <form action="" method="post" class="acms-form acms-admin-form">
      {{ csrf.field(setupFormToken) }}
      <p>ブログとユーザーに関する情報を入力してください。</p>
      {% for error in errorMessages|default([]) %}
        <p class="errorMsg">{{ error.message }}</p>
      {% endfor %}
      <h3>ブログの設定</h3>
      <dl>
        <dt>ブログの名前</dt>
        <dd><input type="text" name="blog_name" size="20" value="{{ fields.blog_name }}" class="acms-admin-form-large acms-admin-form-width-medium" /></dd>
        <dt>インストール時の初期テーマ</dt>
        <dd>
          <p>多くの機能を試したい方は <strong>site</strong>、初心者の方は <strong>beginner</strong> を、テーマをカスタマイズしないで、そのまま利用する方は
            <strong>member</strong> をおすすめします。<strong>develop</strong> は Vite の設定がされている開発者向けです。オリジナルテーマを 0 から作りたい方は <strong>blank</strong> テーマをおすすめします。</p>
          <input type="hidden" name="select_theme" value="" />
          <div class="selectThemeList">
            {% for theme in themes|default([]) %}
              <label class="selectTheme acms-form-radio">
                {% if theme.image %}<img class="border" src="./{{ theme.image }}" alt="{{ theme.label }}テーマ" /><br />{% endif %}
                <input name="select_theme" type="radio" value="{{ theme.key }}"{{ fields.select_theme == theme.key ? ' checked="checked"' : '' }} />
                <i class="acms-ico-radio" aria-hidden="true"></i>&nbsp;<strong>{{ theme.label }}</strong>
                {% if theme.description %}<p class="theme-desc">{{ theme.description }}</p>{% endif %}
              </label>
            {% endfor %}
          </div>
          {% if comparisonThemes|default([]) is not empty %}
          <div id="theme-about">
            <table class="comparisonTable">
              <thead>
                <tr>
                  <th></th>
                  {% for theme in comparisonThemes %}<th>{{ theme.label }}</th>{% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for attribute in comparisonAttributes|default([]) %}
                <tr>
                  <th>{{ attribute }}</th>
                  {% for theme in comparisonThemes %}<td>{{ theme.comparison[attribute]|default('') }}</td>{% endfor %}
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          {% endif %}
        </dd>
      </dl>
      <h3>ユーザーの設定</h3>
      <dl>
        <dt>ユーザー名</dt>
        <dd><input type="text" name="user_name" size="10" value="{{ fields.user_name }}" class="acms-admin-form-large acms-admin-form-width-small" /></dd>
        <dt>メールアドレス</dt>
        <dd><input type="text" name="user_mail" value="{{ fields.user_mail }}" class="acms-admin-form-large acms-admin-form-width-medium" /></dd>
        <dt>ユーザーID（半角英数字）</dt>
        <dd><input type="text" name="user_code" size="10" value="{{ fields.user_code }}" autocomplete="off" class="acms-admin-form-large acms-admin-form-width-mini" /></dd>
        <dt>パスワード（半角英数字）</dt>
        <dd><input type="password" name="user_pass" size="10" value="" autocomplete="new-password" class="acms-admin-form-large acms-admin-form-width-mini" /></dd>
      </dl>
      <p id="submitBtn">
        <input type="hidden" name="do" value="true" />
        <input type="hidden" name="phase" value="5" />
        <input type="submit" name="submit" value="ブログとユーザーを設定する" class="acms-admin-btn acms-admin-btn-info acms-admin-btn-large" />
      </p>
    </form>
  {% endif %}
{% endblock %}
