{% extends "layouts/app.twig" %}

{% block content %}
<div class="px-4 py-3">
    <!-- Header with search and view controls -->
    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center mb-4 gap-3">
        <div>
            <h1 class="display-4 fw-bold text-dark">Music</h1>
            <div class="text-muted small mt-1">
                Music collection coming soon
            </div>
        </div>

        <div class="d-flex flex-column flex-sm-row gap-3 w-100 w-sm-auto">
            <!-- Search form -->
            <form method="GET" class="d-flex gap-2">
                <input type="hidden" name="view" value="{{ view_mode }}">
                <input type="hidden" name="per_page" value="{{ pagination.per_page }}">
                <div class="position-relative">
                    <input
                        type="text"
                        name="search"
                        value="{{ search }}"
                        placeholder="Search music..."
                        class="form-control ps-5"
                        disabled
                    >
                    <svg class="position-absolute top-50 start-0 translate-middle-y ms-3 text-muted" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                </div>
                <button type="submit" class="btn btn-primary" disabled>
                    Search
                </button>
            </form>

            <!-- View mode switcher -->
            <div class="btn-group" role="group">
                {% for mode in view_modes %}
                <button
                    class="btn btn-outline-secondary"
                    disabled
                    title="Coming Soon"
                >
                    {% if mode == 'grid' %}
                    <svg class="me-1" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                    </svg>
                    {% elseif mode == 'list' %}
                    <svg class="me-1" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
                    </svg>
                    {% endif %}
                    {{ mode|title }}
                </button>
                {% endfor %}
            </div>
        </div>
    </div>

    <!-- Coming Soon Message -->
    <div class="text-center py-5">
        <svg class="mx-auto text-muted mb-3" width="48" height="48" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
        </svg>
        <h3 class="h5 fw-medium text-dark">Music Coming Soon</h3>
        <p class="text-muted">Music collection and management features are currently in development.</p>
    </div>
</div>
{% endblock %}