{% extends "base.html" %}

{% block title %}Config · {{ app_name }}{% endblock %}

{% block content %}
<section class="panel">
  <p class="eyebrow">Configuration</p>
  <h1>Config</h1>

  {% if force_password_change %}
  <div class="alert">
    首次登录后需要先修改密码。完成后再继续长期使用当前配置页面。
  </div>
  {% endif %}

  {% if password_change_error %}
  <div class="alert">{{ password_change_error }}</div>
  {% endif %}

  {% if config_error %}
  <div class="alert">{{ config_error }}</div>
  {% endif %}

  {% if config_saved %}
  <div class="notice">config saved to .env. Some changes may require an app restart.</div>
  {% endif %}

  {% if ticktick_oauth_error %}
  <div class="alert">{{ ticktick_oauth_error }}</div>
  {% endif %}

  {% if ticktick_oauth_notice %}
  <div class="notice">{{ ticktick_oauth_notice }}</div>
  {% endif %}

  <div class="meta single-column">
    <div>
      <dt>当前用户</dt>
      <dd>admin</dd>
    </div>
  </div>

  <section class="config-block">
    <h2>Change Password</h2>
    <form class="auth-form" method="post" action="/config/change-password">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

      <label>
        <span>Current Password</span>
        <input type="password" name="current_password" autocomplete="current-password" required>
      </label>

      <label>
        <span>New Password</span>
        <input type="password" name="new_password" autocomplete="new-password" required>
      </label>

      <label>
        <span>Confirm New Password</span>
        <input type="password" name="confirm_password" autocomplete="new-password" required>
      </label>

      <button type="submit">修改密码</button>
    </form>
  </section>

  <section class="config-block">
    <h2>Config</h2>
    <form class="config-form" method="post" action="/config">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

      {% for section in config_sections %}
      <fieldset class="config-section">
        <legend>{{ section.name }}</legend>
        {% for field in section.fields %}
        <label>
          <span>{{ field.label }}</span>
          {% if field.secret %}
          <input type="{{ field.input_type }}" name="{{ field.env_name }}" value="" placeholder="leave blank to keep current value">
          <small>{% if field.configured %}configured{% else %}not configured{% endif %}</small>
          {% else %}
          <input type="{{ field.input_type }}" name="{{ field.env_name }}" value="{{ field.value }}">
          {% endif %}
        </label>
        {% endfor %}

        {% if section.name == "TickTick" %}
        <div class="integration-action-row">
          <div>
            <p class="integration-action-title">TickTick OAuth</p>
            {% if ticktick_oauth_ready %}
            <p class="integration-action-copy">Use the saved TickTick client settings to start the authorization flow.</p>
            {% else %}
            <p class="integration-action-copy">Fill in TickTick Client ID, Client Secret, and Redirect URI before starting OAuth.</p>
            {% endif %}
          </div>
          {% if ticktick_oauth_ready %}
          <a class="button-link" href="/ticktick/auth/start">Authorize TickTick</a>
          {% else %}
          <span class="button-link disabled" aria-disabled="true">Authorize TickTick</span>
          {% endif %}
        </div>
        {% endif %}
      </fieldset>
      {% endfor %}

      <button type="submit">Save Config</button>
    </form>
  </section>

  <form class="logout-form" method="post" action="/logout">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <button type="submit">登出</button>
  </form>
</section>
{% endblock %}