<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Workshop</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
</head>

<body>
    <div class="main-container">
        <div class="image-wrapper">
            <div class="image-container">
                <img src="{{ image_url }}" alt="Map Image">
            </div>

            <div class="details-container">
                <div class="card-title">{{ map_title }}</div>
                <div class="description">
                    {{ description }}
                </div>
                <a href="{{ url_for('download_bsp', image_path=image_url) }}">
                    <button class="download-btn">🡇 Скачать</button>
                </a>
            </div>

            <div class="game-mode">
                <span>Режим игры:</span>
                <span class="dynamic-data">{{ game_mode | default('Не указан') }}</span>
            </div>

            <div class="tags">
                <span>Метки:</span>
                <span class="dynamic-data">{{ tags | default('Не указаны') }}</span>
            </div>

            <div class="file-size">
                <span>Размер файла:</span>
                <span class="dynamic-data">{{ file_size | default('Не указан') }}</span>
            </div>

            <div class="added-time">
                <span>Добавлен:</span>
                <span class="dynamic-data">{{ added_time | default('Не указано') }}</span>
            </div>

            {% if youtube_link %}
            <div class="youtube-container">
                <iframe
                    width="265"
                    height="150"
                    src="{{ youtube_link | replace('watch?v=', 'embed/') }}"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
            </div>
            {% endif %}
        </div>
    </div>
</body>

</html>
