{% extends "base.html" %}

{% block title %}Settings - Bullet Journal{% endblock %}

{% block content %}
<div class="card card--full">
  <p class="card__eyebrow">Preferences</p>
  <h2>Settings</h2>

  <form method="POST" action="{{ url_for('main.update_settings') }}">
    <fieldset class="settings-fieldset">
      <legend>Appearance</legend>

      <div class="form-group">
        <label for="theme">Theme</label>
        <select id="theme" name="theme">
          <option value="light" {% if settings.theme == 'light' %}selected{% endif %}>Light (Ivory)</option>
          <option value="dark" {% if settings.theme == 'dark' %}selected{% endif %}>Dark (Charcoal)</option>
        </select>
        <span class="form-help">Choose your preferred color scheme.</span>
      </div>

      <div class="form-group">
        <label for="font_size">Font Size: {{ settings.font_size }}px</label>
        <input type="range" id="font_size" name="font_size" min="14" max="24" value="{{ settings.font_size }}" oninput="document.getElementById('font_size_label').textContent = this.value + 'px'">
        <span class="form-help" id="font_size_label">{{ settings.font_size }}px</span>
      </div>
    </fieldset>

    <button type="submit" class="btn btn-primary btn-block">Save Settings</button>
  </form>
</div>

<div class="card card--full">
  <p class="card__eyebrow">Data</p>
  <h2>Import / Export</h2>

  <div class="form-group">
    <a href="{{ url_for('main.export_logs') }}" class="btn btn-secondary btn-block">Export All Logs as JSON</a>
    <span class="form-help">Download a JSON file of all your bullet journal entries.</span>
  </div>

  <form method="POST" action="{{ url_for('main.import_logs') }}" enctype="multipart/form-data" class="import-form">
    <div class="form-group">
      <label for="file">Import JSON File</label>
      <input type="file" id="file" name="file" accept=".json">
      <span class="form-help">Upload a previously exported JSON file to restore your logs.</span>
    </div>
    <button type="submit" class="btn btn-secondary btn-block">Import Logs</button>
  </form>
</div>

<div class="card card--future">
  <p class="card__eyebrow">Coming Soon</p>
  <h3>Account Settings</h3>
  <p class="future-text">Password change and account management will be available soon.</p>
  <div class="future-placeholder">
    <span>🔒</span>
  </div>
</div>
{% endblock %}