{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="title">Education Content</div>
    <div class="subtitle">Access official SerUP curriculum materials.</div>

    <div class="glass-panel">
        <h3 style="margin-top:0; color:var(--primary);">Available Materials</h3>
        {% if files %}
        <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));">
            {% for f in files %}
            <div style="background:rgba(0,0,0,0.3); border:1px solid var(--border); border-radius:8px; padding:1.5rem; text-align:center; transition:transform 0.2s;">
                <div style="color:var(--text-muted); margin-bottom:1rem;">
                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                    </svg>
                </div>
                <div style="font-weight:600; font-size:0.875rem; margin-bottom:1rem; word-break:break-all;">{{ f }}</div>
                <a href="{{ url_for('education_download', filename=f) }}" target="_blank" class="btn" style="padding:0.4rem; font-size:0.875rem;">Access Material</a>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p style="color:var(--text-muted);">No educational content available in the master directory.</p>
        {% endif %}
    </div>
</div>
{% endblock %}