{% extends "base.html" %}

{% block title %}Platforma Edukacyjna - Norda Biznes Partner{% endblock %}

{% block extra_css %}
<style>
    .education-header {
        margin-bottom: var(--spacing-xl);
    }

    .education-header h1 {
        font-size: var(--font-size-3xl);
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .education-header p {
        color: var(--text-secondary);
        font-size: var(--font-size-lg);
    }

    .education-banner {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
        border: 1px solid #3b82f6;
        border-radius: var(--radius-lg);
        padding: var(--spacing-lg);
        margin-bottom: var(--spacing-xl);
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    .education-banner svg {
        width: 24px;
        height: 24px;
        color: #2563eb;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .education-banner .info-content {
        flex: 1;
    }

    .education-banner .info-title {
        font-weight: 600;
        color: #1e40af;
        margin-bottom: var(--spacing-xs);
    }

    .education-banner .info-text {
        color: #1d4ed8;
        font-size: var(--font-size-sm);
    }

    .materials-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: var(--spacing-lg);
    }

    .material-card {
        background: white;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border-color);
        box-shadow: var(--shadow);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
    }

    .material-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

    .material-card.coming-soon {
        opacity: 0.7;
    }

    .material-card.coming-soon::after {
        content: 'Wkrotce';
        position: absolute;
        top: 12px;
        right: -24px;
        background: var(--warning);
        color: white;
        font-size: var(--font-size-xs);
        font-weight: 600;
        padding: 4px 32px;
        transform: rotate(45deg);
    }

    .material-card.available {
        cursor: pointer;
    }

    .material-card.available:hover {
        border-color: var(--primary);
    }

    .material-card.available::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.02) 0%, rgba(37, 99, 235, 0.05) 100%);
        pointer-events: none;
    }

    .video-preview {
        position: relative;
        background: #1a1a2e;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        aspect-ratio: 16/9;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .video-preview video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .play-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.3);
        transition: background 0.2s;
    }

    .material-card:hover .play-overlay {
        background: rgba(0, 0, 0, 0.5);
    }

    .play-button {
        width: 64px;
        height: 64px;
        background: rgba(255, 255, 255, 0.95);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.2s;
    }

    .material-card:hover .play-button {
        transform: scale(1.1);
    }

    .play-button svg {
        width: 28px;
        height: 28px;
        color: #2563eb;
        margin-left: 4px;
    }

    .material-content {
        padding: var(--spacing-lg);
    }

    .material-type {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 4px 10px;
        border-radius: var(--radius-sm);
        font-size: var(--font-size-xs);
        font-weight: 600;
        margin-bottom: var(--spacing-md);
    }

    .material-type.video {
        background: #fee2e2;
        color: #dc2626;
    }

    .material-type.article {
        background: #dbeafe;
        color: #2563eb;
    }

    .material-type.guide {
        background: #d1fae5;
        color: #059669;
    }

    .material-title {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }

    .material-description {
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        line-height: 1.6;
        margin-bottom: var(--spacing-md);
    }

    .material-meta {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        color: var(--text-muted);
        font-size: var(--font-size-xs);
    }

    .material-meta svg {
        width: 14px;
        height: 14px;
    }

    /* Video Modal */
    .video-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.9);
        z-index: 9999;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-lg);
    }

    .video-modal.active {
        display: flex;
    }

    .video-modal-content {
        max-width: 900px;
        width: 100%;
        position: relative;
    }

    .video-modal-close {
        position: absolute;
        top: -40px;
        right: 0;
        background: none;
        border: none;
        color: white;
        font-size: 32px;
        cursor: pointer;
        padding: 8px;
        line-height: 1;
    }

    .video-modal-close:hover {
        color: #f87171;
    }

    .video-modal video {
        width: 100%;
        border-radius: var(--radius-lg);
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    }

    .video-modal-title {
        color: white;
        text-align: center;
        margin-top: var(--spacing-md);
        font-size: var(--font-size-lg);
    }

    .new-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        background: #22c55e;
        color: white;
        font-size: var(--font-size-xs);
        font-weight: 600;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        z-index: 1;
    }
</style>
{% endblock %}

{% block content %}
<div class="education-header">
    <h1>
        <svg width="32" height="32" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="color: var(--warning);">
            <path d="M12 14l9-5-9-5-9 5 9 5z"/>
            <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"/>
            <path d="M12 14l9-5-9-5-9 5 9 5zm0 0v6"/>
        </svg>
        Platforma Edukacyjna
    </h1>
    <p>Materialy szkoleniowe i poradniki dla czlonkow Stowarzyszenia Norda Biznes</p>
</div>

<div class="education-banner">
    <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
        <path d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
    </svg>
    <div class="info-content">
        <div class="info-title">Nowe materialy wideo!</div>
        <div class="info-text">
            Dodalismy pierwsze filmy instruktazowe. Kliknij na karte z wideo, zeby je odtworzyc.
            Kolejne materialy pojawia sie wkrotce.
        </div>
    </div>
</div>

<div class="materials-grid">
    {% for material in materials %}
    <div class="material-card {% if material.status == 'coming_soon' %}coming-soon{% else %}available{% endif %}"
         {% if material.status == 'available' and material.video_url %}
         onclick="openVideo('{{ url_for('static', filename=material.video_url) }}', '{{ material.title }}')"
         {% endif %}>

        {% if material.status == 'available' and material.type == 'video' %}
        <div class="video-preview">
            <span class="new-badge">Nowe</span>
            <video muted preload="metadata">
                <source src="{{ url_for('static', filename=material.video_url) }}#t=1" type="video/mp4">
            </video>
            <div class="play-overlay">
                <div class="play-button">
                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="material-content">
            <span class="material-type {{ material.type }}">
                {% if material.type == 'video' %}
                    <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    Wideo
                {% elif material.type == 'article' %}
                    <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                    Artykul
                {% elif material.type == 'guide' %}
                    <svg width="12" height="12" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
                    Poradnik
                {% endif %}
            </span>
            <h3 class="material-title">{{ material.title }}</h3>
            <p class="material-description">{{ material.description }}</p>
            <div class="material-meta">
                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
                {{ material.duration }}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Video Modal -->
<div class="video-modal" id="videoModal" onclick="closeVideo(event)">
    <div class="video-modal-content" onclick="event.stopPropagation()">
        <button class="video-modal-close" onclick="closeVideo()">&times;</button>
        <video id="modalVideo" controls>
            <source src="" type="video/mp4">
            Twoja przegladarka nie obsluguje odtwarzania wideo.
        </video>
        <p class="video-modal-title" id="modalVideoTitle"></p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
function openVideo(videoUrl, title) {
    const modal = document.getElementById('videoModal');
    const video = document.getElementById('modalVideo');
    const titleEl = document.getElementById('modalVideoTitle');

    video.src = videoUrl;
    titleEl.textContent = title;
    modal.classList.add('active');
    video.play();

    document.body.style.overflow = 'hidden';
}

function closeVideo(event) {
    if (event && event.target !== document.getElementById('videoModal')) return;

    const modal = document.getElementById('videoModal');
    const video = document.getElementById('modalVideo');

    video.pause();
    video.src = '';
    modal.classList.remove('active');

    document.body.style.overflow = '';
}

document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeVideo();
    }
});
{% endblock %}
