{% extends "base.html" %}
{% block content %}
  <section class="card">
    <div class="language-selector">
      <a href="{{ request.query_string.decode('utf-8')|url_with_lang('en') }}" class="{{ 'active' if lang == 'en' else '' }}">EN</a>
      <a href="{{ request.query_string.decode('utf-8')|url_with_lang('es') }}" class="{{ 'active' if lang == 'es' else '' }}">ES</a>
    </div>
    <h1>{{ t('app_title') }}</h1>
    <form method="post" action="{{ url_for('preview') }}" class="grid">
      <input type="hidden" name="lang" value="{{ lang }}">
      <div class="field">
        <label>{{ t('form.countdown_title_label') }}</label>
        <input type="text" name="title" placeholder="{{ t('form.countdown_title_placeholder') }}" value="{{ title }}">
      </div>
      <div class="field">
        <label>{{ t('form.target_date_label') }}</label>
        <input type="datetime-local" name="target" value="{{ target }}">
        
      </div>
      <div class="field">
        <label>{{ t('form.color_scheme_label') }}</label>
        <select name="scheme">
          <option value="dark" {{ 'selected' if scheme=='dark' else '' }}>{{ t('form.scheme_dark') }}</option>
          <option value="light" {{ 'selected' if scheme=='light' else '' }}>{{ t('form.scheme_light') }}</option>
        </select>
      </div>
      <div class="field">
        <label>{{ t('form.accent_color_label') }}</label>
        <input type="color" name="accent" value="{{ accent }}">
      </div>
      <div class="field">
        <label>{{ t('form.foreground_color_label') }}</label>
        <input type="color" name="fg" value="{{ fg }}">
      </div>
      <div class="field">
        <label>{{ t('form.background_color_label') }}</label>
        <input type="color" name="bg" value="{{ bg }}">
      </div>
      <div class="field">
        <label>{{ t('form.corner_radius_label') }}</label>
        <input type="number" name="radius" min="0" max="48" step="1" value="{{ radius }}">
      </div>
      <div class="field">
        <label>{{ t('form.shadow_strength_label') }}</label>
        <select name="shadow">
          <option value="none" {{ 'selected' if shadow=='none' else '' }}>{{ t('form.shadow_none') }}</option>
          <option value="sm" {{ 'selected' if shadow=='sm' else '' }}>{{ t('form.shadow_small') }}</option>
          <option value="md" {{ 'selected' if shadow=='md' else '' }}>{{ t('form.shadow_medium') }}</option>
          <option value="lg" {{ 'selected' if shadow=='lg' else '' }}>{{ t('form.shadow_large') }}</option>
        </select>
      </div>
      <div class="field">
        <label>{{ t('form.font_label') }}</label>
        <input type="text" name="font" value="{{ font }}" placeholder="{{ t('form.font_placeholder') }}">
      </div>
      <div class="field">
        <label>{{ t('form.show_milliseconds_label') }}</label>
        <select name="millis">
          <option value="0" {{ '' if show_millis else 'selected' }}>{{ t('form.no') }}</option>
          <option value="1" {{ 'selected' if show_millis else '' }}>{{ t('form.yes') }}</option>
        </select>
      </div>
      <div class="field">
        <label>{{ t('form.round_to_nearest_label') }}</label>
        <select name="rounded_unit">
          <option value="none" {{ 'selected' if rounded_unit=='none' else '' }}>{{ t('form.round_none') }}</option>
          <option value="minutes" {{ 'selected' if rounded_unit=='minutes' else '' }}>{{ t('form.round_minutes') }}</option>
          <option value="hours" {{ 'selected' if rounded_unit=='hours' else '' }}>{{ t('form.round_hours') }}</option>
          <option value="days" {{ 'selected' if rounded_unit=='days' else '' }}>{{ t('form.round_days') }}</option>
        </select>
      </div>

      <div class="actions">
        <button type="submit">{{ t('form.generate_button') }}</button>
      </div>
    </form>
    <p class="muted">
      {{ t('info.description') }}
    </p>
  </section>
{% endblock %}