{% extends "base.html" %}
{% block title %}Saved & Notes — Python 108{% endblock %}
{% block content %}
<div class="bookmarks-page">

  <div class="page-header">
    <div>
      <h1 class="page-title">🔖 Saved Programs & Notes</h1>
      <p class="page-sub">
        {{ bookmarked|length }} bookmark{{ 's' if bookmarked|length != 1 else '' }}
        · {{ notes|length }} note{{ 's' if notes|length != 1 else '' }}
      </p>
    </div>
  </div>

  <!-- Tabs -->
  <div class="bm-tabs">
    <button class="bm-tab active" id="tab-bookmarks" onclick="showTab('bookmarks')">
      🔖 Bookmarks ({{ bookmarked|length }})
    </button>
    <button class="bm-tab" id="tab-notes" onclick="showTab('notes')">
      📝 Notes ({{ notes|length }})
    </button>
  </div>

  <!-- Bookmarks tab -->
  <div id="panel-bookmarks">
    {% if bookmarked %}
    <div class="bm-grid">
      {% for p in bookmarked %}
      <div class="bm-card">
        <div class="bm-card-top">
          <div>
            <span class="prog-num">#{{ p['n'] }}</span>
            <span class="mod-badge">{{ p['mod'] }}</span>
          </div>
          <button class="bm-remove-btn" onclick="removeBookmark({{ p['n'] }}, this)"
                  title="Remove bookmark">✕</button>
        </div>
        <a href="{{ url_for('program', n=p['n']) }}" class="bm-title">{{ p['title'] }}</a>
        <div class="bm-what">{{ p['what'] }}</div>
        <div class="bm-footer">
          {% if p['done'] %}
          <span class="status-pill status-active" style="font-size:.7rem">✓ Completed</span>
          {% else %}
          <span class="status-pill status-inactive" style="font-size:.7rem">Not done yet</span>
          {% endif %}
          <a href="{{ url_for('program', n=p['n']) }}" class="btn btn-sm btn-outline">Open →</a>
        </div>
        <!-- Inline note preview -->
        {% if notes.get(p['n']) %}
        <div class="bm-note-preview">
          <span class="bm-note-label">📝</span>
          {{ notes[p['n']][:120] }}{% if notes[p['n']]|length > 120 %}…{% endif %}
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state" style="margin-top:2rem">
      <div class="empty-icon">🔖</div>
      <div class="empty-title">No bookmarks yet</div>
      <div class="empty-sub">
        Click the <strong>🔖 Save</strong> button on any program page to save it here.
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Notes tab -->
  <div id="panel-notes" style="display:none">
    {% if notes %}
    <div class="notes-list">
      {% for prog_n, note_text in notes.items() %}
      {% set prog = namespace(found=none) %}
      {% for p in all_programs %}
        {% if p.n == prog_n and prog.found is none %}
          {% set prog.found = p %}
        {% endif %}
      {% endfor %}
      <div class="note-card">
        <div class="note-card-header">
          <div>
            <span class="prog-num">#{{ prog_n }}</span>
            {% if prog.found %}
            <span class="note-prog-title">{{ prog.found.title }}</span>
            <span class="mod-badge">{{ prog.found.mod }}</span>
            {% endif %}
          </div>
          <a href="{{ url_for('program', n=prog_n) }}" class="btn btn-sm btn-outline">
            Edit note →
          </a>
        </div>
        <div class="note-text">{{ note_text }}</div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="empty-state" style="margin-top:2rem">
      <div class="empty-icon">📝</div>
      <div class="empty-title">No notes yet</div>
      <div class="empty-sub">
        Open any program and write in the <strong>My Notes</strong> panel — it auto-saves as you type.
      </div>
    </div>
    {% endif %}
  </div>

</div>

<script>
function showTab(name) {
  document.getElementById('panel-bookmarks').style.display = name === 'bookmarks' ? 'block' : 'none';
  document.getElementById('panel-notes').style.display     = name === 'notes'     ? 'block' : 'none';
  document.getElementById('tab-bookmarks').classList.toggle('active', name === 'bookmarks');
  document.getElementById('tab-notes').classList.toggle('active',     name === 'notes');
}

function removeBookmark(n, btn) {
  fetch('/toggle_bookmark/' + n, {method:'POST'})
    .then(r => r.json())
    .then(data => {
      if (!data.bookmarked) {
        btn.closest('.bm-card').style.opacity = '0';
        setTimeout(() => btn.closest('.bm-card').remove(), 300);
      }
    });
}
</script>
{% endblock %}