{% extends "base.html" %}

{% block title %}Today's Log - Bullet Journal{% endblock %}

{% block content %}
<div class="card card--full">
  <p class="card__eyebrow">Today</p>
  <h2>{{ log.date.strftime('%A, %B %d, %Y') }}</h2>

  <form method="POST" action="{{ url_for('main.log_edit', log_id=log.id) }}">
    <!-- Prompt -->
    <div class="form-group">
      <label for="prompt">Daily Prompt</label>
      <textarea id="prompt" name="prompt" rows="3" placeholder="What's on your mind today?">{{ log.prompt or '' }}</textarea>
      <span class="form-help">Set the intention for your day.</span>
    </div>

    <!-- Notes -->
    <div class="form-group">
      <label for="notes">Notes</label>
      <textarea id="notes" name="notes" rows="4" placeholder="Free-form notes...">{{ log.notes or '' }}</textarea>
    </div>

    <!-- Bullets Section -->
    <div class="bullets-section">
      <h3>Bullets & Insights</h3>
      <div class="bullets-list" id="bullets-list">
        {% for item in log.items %}
        <div class="bullet-item" data-item-id="{{ item.id }}">
          <div class="bullet-item__row">
            <select name="item_type[]" class="bullet-item__type" aria-label="Item type">
              <option value="bullet" {% if item.type == 'bullet' %}selected{% endif %}>Bullet</option>
              <option value="task" {% if item.type == 'task' %}selected{% endif %}>Task</option>
              <option value="note" {% if item.type == 'note' %}selected{% endif %}>Note</option>
            </select>
            <select name="item_symbol[]" class="bullet-item__symbol" aria-label="Symbol">
              <option value="•" {% if item.symbol == '•' %}selected{% endif %}>•</option>
              <option value="-" {% if item.symbol == '-' %}selected{% endif %}>-</option>
              <option value="○" {% if item.symbol == '○' %}selected{% endif %}>○</option>
            </select>
            <input type="text" name="item_text[]" class="bullet-item__text" value="{{ item.text }}" placeholder="Add a bullet point..." aria-label="Bullet text">
            <select name="item_status[]" class="bullet-item__status" aria-label="Status">
              <option value="todo" {% if item.status == 'todo' %}selected{% endif %}>Todo</option>
              <option value="doing" {% if item.status == 'doing' %}selected{% endif %}>Doing</option>
              <option value="done" {% if item.status == 'done' %}selected{% endif %}>Done</option>
              <option value="cancelled" {% if item.status == 'cancelled' %}selected{% endif %}>Cancelled</option>
            </select>
            <input type="hidden" name="item_id[]" value="{{ item.id }}">
          </div>
        </div>
        {% endfor %}
      </div>
      <button type="button" class="btn btn-secondary btn-sm" onclick="addBullet()">+ Add Bullet</button>
    </div>

    <!-- Gratitude Section -->
    <div class="gratitude-section">
      <h3>Gratitude</h3>
      <div class="gratitude-grid">
        <div class="gratitude-item">
          <label for="gratitude_0">1. I'm grateful for...</label>
          <input type="text" id="gratitude_0" name="gratitude_0" value="{{ log.gratitude_list[0] if log.gratitude_list else '' }}" placeholder="Item 1">
        </div>
        <div class="gratitude-item">
          <label for="gratitude_1">2. I'm grateful for...</label>
          <input type="text" id="gratitude_1" name="gratitude_1" value="{{ log.gratitude_list[1] if log.gratitude_list else '' }}" placeholder="Item 2">
        </div>
        <div class="gratitude-item">
          <label for="gratitude_2">3. I'm grateful for...</label>
          <input type="text" id="gratitude_2" name="gratitude_2" value="{{ log.gratitude_list[2] if log.gratitude_list else '' }}" placeholder="Item 3">
        </div>
      </div>
    </div>

    <!-- Sleep Section -->
    <div class="sleep-section">
      <h3>Sleep</h3>
      <div class="sleep-grid">
        <div class="sleep-item">
          <label for="bedtime">Bedtime</label>
          <input type="text" id="bedtime" name="bedtime" value="{{ log.bedtime or '' }}" placeholder="e.g., 11:00 PM">
        </div>
        <div class="sleep-item">
          <label for="wake_time">Wake Time</label>
          <input type="text" id="wake_time" name="wake_time" value="{{ log.wake_time or '' }}" placeholder="e.g., 7:00 AM">
        </div>
        <div class="sleep-item">
          <label for="sleep_quality">Sleep Quality</label>
          <select id="sleep_quality" name="sleep_quality">
            <option value="">Select...</option>
            <option value="poor" {% if log.sleep_quality == 'poor' %}selected{% endif %}>Poor</option>
            <option value="fair" {% if log.sleep_quality == 'fair' %}selected{% endif %}>Fair</option>
            <option value="good" {% if log.sleep_quality == 'good' %}selected{% endif %}>Good</option>
            <option value="excellent" {% if log.sleep_quality == 'excellent' %}selected{% endif %}>Excellent</option>
          </select>
        </div>
      </div>
    </div>

    <!-- Mood -->
    <div class="mood-section">
      <h3>Mood</h3>
      <div class="mood-selector">
        <label for="mood">How are you feeling?</label>
        <select id="mood" name="mood">
          <option value="">Select mood...</option>
          <option value="amazing" {% if log.mood == 'amazing' %}selected{% endif %}>Amazing</option>
          <option value="good" {% if log.mood == 'good' %}selected{% endif %}>Good</option>
          <option value="okay" {% if log.mood == 'okay' %}selected{% endif %}>Okay</option>
          <option value="bad" {% if log.mood == 'bad' %}selected{% endif %}>Bad</option>
          <option value="terrible" {% if log.mood == 'terrible' %}selected{% endif %}>Terrible</option>
        </select>
      </div>
    </div>

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

<script>
function addBullet() {
  const list = document.getElementById('bullets-list');
  const newItem = document.createElement('div');
  newItem.className = 'bullet-item';
  newItem.dataset.itemId = '';
  newItem.innerHTML = `
    <div class="bullet-item__row">
      <select name="item_type[]" class="bullet-item__type" aria-label="Item type">
        <option value="bullet" selected>Bullet</option>
        <option value="task">Task</option>
        <option value="note">Note</option>
      </select>
      <select name="item_symbol[]" class="bullet-item__symbol" aria-label="Symbol">
        <option value="•" selected>•</option>
        <option value="-">-</option>
        <option value="○">○</option>
      </select>
      <input type="text" name="item_text[]" class="bullet-item__text" placeholder="Add a bullet point..." aria-label="Bullet text">
      <select name="item_status[]" class="bullet-item__status" aria-label="Status">
        <option value="todo" selected>Todo</option>
        <option value="doing">Doing</option>
        <option value="done">Done</option>
        <option value="cancelled">Cancelled</option>
      </select>
      <input type="hidden" name="item_id[]" value="">
    </div>
  `;
  list.appendChild(newItem);
  newItem.querySelector('.bullet-item__text').focus();
}
</script>
{% endblock %}