{% extends "base.html" %}
{% block title %}AidaHL slides{% endblock %}
{% block page_id %}slides{% endblock %}
{% block head %}<style>
.slides-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}.slides-screen{padding:clamp(16px,3vw,40px);max-width:1100px;margin:20px auto}.slides-screen h2{font-size:clamp(24px,3vw,38px)}#slides-text{font-size:clamp(18px,2vw,26px);line-height:1.5;white-space:pre-wrap}#slides-code{font-size:clamp(14px,1.5vw,20px);white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:var(--bg);border:1px solid var(--line);border-radius:10px}#slides-progress{width:100%}#slides-labs a{margin-right:12px}.slides-chapter{max-width:100%}
</style>{% endblock %}
{% block content %}
<div id="slides-root" data-api="{{ aida_rel('api/slides') }}" data-academy="{{ aida_rel('academy') }}">
<div class="a-page-head"><h1>AidaHL slides</h1><div class="a-sub">The same guide chapters, code examples and practice labs as the desktop slide viewer.</div></div>
<div id="slides-message" role="status" aria-live="polite"></div>
<div class="slides-tools"><label for="slides-chapter">Chapter</label><select id="slides-chapter" class="a-select slides-chapter" disabled></select><button id="slides-refresh" class="a-btn">Reload guide</button><button id="slides-export" class="a-btn" disabled>Export native HTML deck</button><a class="a-btn" href="{{ aida_rel('academy') }}">Open Coding Lab</a><a class="a-btn" href="{{ aida_rel('aidahl') }}">Open AidaHL editor</a></div>
<progress id="slides-progress" value="0" max="1" aria-label="Guide slide progress"></progress>
<article class="a-card slides-screen" aria-labelledby="slides-title"><div id="slides-kicker"></div><h2 id="slides-title">Loading native guide</h2><p id="slides-text"></p><pre id="slides-code" hidden></pre><div class="slides-tools"><button id="slides-copy" class="a-btn" disabled>Copy this code</button><button id="slides-download" class="a-btn" disabled>Download this code</button><button id="slides-speak" class="a-btn" disabled>Read aloud</button></div><div id="slides-labs"></div></article>
<div class="slides-tools"><button id="slides-prev" class="a-btn" disabled>Previous slide</button><span id="slides-number" aria-live="polite"></span><button id="slides-next" class="a-btn" disabled>Next slide</button><span class="a-sub">Arrow keys move between slides. Home and End jump to the first and last slide.</span></div>
</div>
{% endblock %}
{% block scripts %}<script src="{{ aida_rel('static/js/slides.js') }}"></script>{% endblock %}