first commit

resources/views/tvshows/index.twig

@@ -0,0 +1,70 @@
+{% 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">TV Shows</h1>
+            <div class="text-muted small mt-1">
+                TV Shows 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 TV shows..."
+                        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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+        </svg>
+        <h3 class="h5 fw-medium text-dark">TV Shows Coming Soon</h3>
+        <p class="text-muted">TV show collection and management features are currently in development.</p>
+    </div>
+</div>
+{% endblock %}