{% extends "base.html" %}
{% block title %}설정 · ARGOS{% endblock %}
{% block page_class %}page--settings{% endblock %}
{% block content %}
<div class="settings">
  <header class="settings__head">
    <h1 class="settings__title">설정</h1>
    <p class="settings__lede">
      관심 토픽·브리핑 스케줄 등 사용자 취향 값을 여기서 수정하면
      <span class="nowrap"><code>config.toml</code>에</span> 반영됩니다.
    </p>
  </header>

  {% if view.saved %}
  <div class="settings-banner" role="status">저장되었습니다.</div>
  {% endif %}

  <form class="settings-form" method="post" action="/settings">
    {% for field in view.editable %}
    <div class="setting-field setting-field--{{ field.kind }}{% if field.error %} setting-field--error{% endif %}">

      {% if field.kind == "bool" %}
      {# Toggle switch. Hidden marker proves the checkbox was on the submitted
         form, so the server can tell an intentional uncheck from a partial POST. #}
      <input type="hidden" name="{{ field.key }}__present" value="1">
      <label class="setting-toggle">
        <input class="setting-toggle__input" type="checkbox" id="f-{{ field.key }}"
               name="{{ field.key }}"{% if field.value == "true" %} checked{% endif %}>
        <span class="setting-toggle__track" aria-hidden="true"></span>
        <span class="setting-toggle__text">{{ field.label }}</span>
      </label>

      {% elif field.kind == "weekdays" %}
      {# Multi-select toggle-button group. Hidden marker (like bool) lets the
         server treat an all-off submission as a real empty list. #}
      <span class="setting-field__label" id="lbl-{{ field.key }}">{{ field.label }}</span>
      <input type="hidden" name="{{ field.key }}__present" value="1">
      {% set selected = field.value.split(",") %}
      <div class="daypicker" role="group" aria-labelledby="lbl-{{ field.key }}">
        {% for value, text in field.options %}
        <label class="daypicker__day">
          <input type="checkbox" name="{{ field.key }}" value="{{ value }}"
                 {% if value in selected %}checked{% endif %}>
          <span>{{ text }}</span>
        </label>
        {% endfor %}
      </div>

      {% else %}
      <label class="setting-field__label" for="f-{{ field.key }}">{{ field.label }}</label>

      {% if field.kind == "select" %}
      <select class="setting-field__input setting-field__select" id="f-{{ field.key }}"
              name="{{ field.key }}">
        {% set known = field.options | map(attribute=0) | list %}
        {% if field.value and field.value not in known %}
        <option value="{{ field.value }}" selected>{{ field.value }}</option>
        {% endif %}
        {% for value, text in field.options %}
        <option value="{{ value }}"{% if value == field.value %} selected{% endif %}>{{ text }}</option>
        {% endfor %}
      </select>

      {% elif field.kind == "time" %}
      <input class="setting-field__input setting-field__time" type="time" id="f-{{ field.key }}"
             name="{{ field.key }}" value="{{ field.value }}">

      {% elif field.kind == "int" %}
      <input class="setting-field__input" type="number" id="f-{{ field.key }}"
             name="{{ field.key }}" value="{{ field.value }}" inputmode="numeric" min="0">

      {% else %}
      <input class="setting-field__input" type="text" id="f-{{ field.key }}"
             name="{{ field.key }}" value="{{ field.value }}"
             {% if field.kind == "list" %}placeholder="쉼표로 구분"{% endif %}>
      {% endif %}
      {% endif %}

      <span class="setting-field__key">{{ field.key }}</span>
      {% if field.error %}
      <span class="field-error" role="alert">{{ field.error }}</span>
      {% endif %}
    </div>
    {% endfor %}
    <p class="settings-hint">
      브리핑·수집 시각과 요일 변경은 <code>config.toml</code>에 저장되지만,
      launchd 스케줄에 반영하려면 <code>argos schedule install</code>을 다시
      실행해야 합니다.
    </p>
    <div class="settings-form__actions">
      <button type="submit" class="settings-save">저장</button>
    </div>
  </form>

  <section class="settings-readonly" aria-labelledby="ro-heading">
    <h2 id="ro-heading" class="settings-readonly__title">읽기 전용</h2>
    <p class="settings-readonly__note">
      소스(RSS/SPA)와 시크릿(<code>***</code>)은 웹에서 편집할 수 없습니다.
      시크릿은 <code>argos config</code> CLI 또는 <code>argos init</code>으로 관리하세요.
    </p>
    <dl class="settings-readonly__list">
      {% for key, value in view.readonly %}
      <div class="settings-readonly__row">
        <dt class="settings-readonly__key">{{ key }}</dt>
        <dd class="settings-readonly__val">{{ value }}</dd>
      </div>
      {% endfor %}
    </dl>
  </section>
</div>
{% endblock %}