{% extends "base.html" %}
{% block title %}Exercise {{ ex.n }} — Python 108{% endblock %}
{% block content %}
<div class="exercise-page">

  <div class="breadcrumb">
    <a href="{{ url_for('exercises') }}">Exercises</a>
    <span>›</span>
    <span>Exercise {{ ex.n }}</span>
  </div>

  <!-- Header -->
  <div class="prog-header">
    <div class="prog-header-left">
      <div class="prog-num-big">#{{ ex.n }}</div>
      <div>
        <h1 class="prog-title">{{ prog.title if prog else 'Exercise '+ex.n|string }}</h1>
        <span class="diff-badge diff-{{ ex.diff|lower }}">{{ ex.diff }}</span>
      </div>
    </div>
    <button id="solve-btn"
      class="btn {% if is_solved %}btn-done{% else %}btn-primary{% endif %}"
      onclick="toggleSolved({{ ex.n }})">
      {% if is_solved %}✓ Marked as solved{% else %}Mark as solved{% endif %}
    </button>
  </div>

  <!-- Challenge -->
  <div class="section-card">
    <div class="section-card-title">Challenge</div>
    <p class="challenge-text">{{ ex.q }}</p>
  </div>

  <!-- Hint (collapsible) -->
  <div class="section-card">
    <div class="section-card-title">
      Hint
      <button class="btn-toggle" onclick="toggleHint()">Show hint</button>
    </div>
    <div id="hint-box" class="hint-content" style="display:none">
      {{ ex.hint }}
    </div>
  </div>

  <!-- Reference: original program -->
  {% if prog %}
  <div class="section-card">
    <div class="section-card-title">
      Reference — Program {{ prog.n }} code
      <button class="btn-toggle" onclick="toggleRef()">Show code</button>
    </div>
    <div id="ref-box" style="display:none">
      <pre><code class="language-python">{{ prog.code }}</code></pre>
    </div>
  </div>
  {% endif %}

  <!-- Sample answer (hidden by default) -->
  <div class="section-card">
    <div class="section-card-title">
      Sample answer
      <button class="btn-toggle btn-danger" onclick="toggleAnswer()">Reveal answer</button>
    </div>
    <div id="answer-box" style="display:none">
      <pre><code class="language-python" id="answer-code">{{ ex.answer }}</code></pre>
      <div class="runner-section" style="margin-top:.75rem">
        <div class="runner-header">
          <span class="runner-title">▶ Run this answer</span>
          <span class="pyodide-status" id="ex-status"></span>
          <button id="ex-run-btn" class="btn btn-run btn-sm" onclick="runAnswer()">▶ Run</button>
        </div>
        <pre id="ex-output" class="sandbox-output runner-output" style="min-height:48px">Output will appear here…</pre>
      </div>
    </div>
  </div>

  <!-- Nav -->
  <div class="prog-nav">
    {% if ex.n > 1 %}
    <a href="{{ url_for('exercise', n=ex.n-1) }}" class="btn btn-outline">← Ex {{ ex.n-1 }}</a>
    {% else %}<span></span>{% endif %}
    <a href="{{ url_for('program', n=ex.n) }}" class="btn btn-ghost">View program {{ ex.n }}</a>
    {% if ex.n < 108 %}
    <a href="{{ url_for('exercise', n=ex.n+1) }}" class="btn btn-outline">Ex {{ ex.n+1 }} →</a>
    {% else %}<span></span>{% endif %}
  </div>

</div>

<script src="{{ url_for('static', filename='js/pyodide_runner.js') }}"></script>
<script>
function toggleSolved(n) {
  fetch('/toggle_exercise/' + n, {method:'POST'})
    .then(r => r.json())
    .then(() => location.reload());
}
function toggleHint() {
  const box = document.getElementById('hint-box');
  const btn = document.querySelector('[onclick="toggleHint()"]');
  const show = box.style.display === 'none';
  box.style.display = show ? 'block' : 'none';
  btn.textContent = show ? 'Hide hint' : 'Show hint';
}
function toggleRef() {
  const box = document.getElementById('ref-box');
  const btn = document.querySelector('[onclick="toggleRef()"]');
  const show = box.style.display === 'none';
  box.style.display = show ? 'block' : 'none';
  btn.textContent = show ? 'Hide code' : 'Show code';
  if (show) hljs.highlightAll();
}
function toggleAnswer() {
  const box = document.getElementById('answer-box');
  const btn = document.querySelector('[onclick="toggleAnswer()"]');
  const show = box.style.display === 'none';
  box.style.display = show ? 'block' : 'none';
  btn.textContent = show ? 'Hide answer' : 'Reveal answer';
  if (show) { hljs.highlightAll(); ensurePyodide(document.getElementById('ex-status')); }
}
async function runAnswer() {
  const code = document.getElementById('answer-code').innerText;
  const output = document.getElementById('ex-output');
  const btn = document.getElementById('ex-run-btn');
  const status = document.getElementById('ex-status');
  await runPython(code, output, status, btn);
}
</script>
{% endblock %}