feat: add item images, product detail page, and gallery support in catalog

- Added `ItemImage` model with migration for image handling and metadata
- Implemented product gallery in `detail.html` with thumbnails for additional images
- Updated `Item` model to include `primary_image` property for gallery logic
- Enhanced `catalog/index.html` to support item thumbnails
- Updated `catalog.css` for responsive gallery and item list styling
- Extended catalog views to prefetch images for efficient queries
- Added comprehensive tests for catalog and detail views
- Configured Django to serve media files in development
- Updated admin with inline support for managing `ItemImage` entities

templates/catalog/_fragments/item-list.html

@@ -1,6 +1,32 @@
 <main class="item-list">
+    <div class="items-grid">
     {% for item in items %}
-        <h1>item</h1>
-    {% endfor %}
+        <article class="item-card">
+            <a class="item-card-link" href="{% url 'detail' item.category.slug item.slug %}" aria-label="Открыть товар {{ item.name }}">
+                {% with primary_image=item.primary_image %}
+                    <div class="item-card-image">
+                        {% if primary_image %}
+                            <img src="{{ primary_image.image.url }}" alt="{{ primary_image.alt|default:item.name }}">
+                        {% else %}
+                            <div class="item-card-placeholder">Нет фото</div>
+                        {% endif %}
+                    </div>
+                {% endwith %}
 
-</main>
+                <div class="item-card-body">
+                    <div class="item-card-category">{{ item.category.name }}</div>
+                    <h2 class="item-card-title">{{ item.name }}</h2>
+                    <div class="item-card-footer">
+                        <span class="item-card-price">{{ item.price }} руб.</span>
+                        <span class="item-card-availability {% if item.is_available %}available{% else %}unavailable{% endif %}">
+                            {% if item.is_available %}В наличии{% else %}Нет в наличии{% endif %}
+                        </span>
+                    </div>
+                </div>
+            </a>
+        </article>
+    {% empty %}
+        <p class="item-list-empty">В этой категории пока нет товаров.</p>
+    {% endfor %}
+    </div>
+</main>

templates/catalog/_fragments/side-bar.html

@@ -1,8 +1,13 @@
 <aside>
     <section class="categories a-section">
         <h2>Категории</h2>
+        <a href="/catalog/" class="category {% if selected_category.id == None %}active{% endif %}">Все товары</a>
         {% for category in categories %}
-            <a href="/catalog/{{ category.slug }}" class="category">{{ category.name }}</a>
+            <a href="/catalog/{{ category.slug }}/" class="category {% if selected_category.id == category.slug %}active{% endif %}">
+                {{ category.name }}
+            </a>
+        {% empty %}
+            <p class="categories-empty">Категории пока не добавлены.</p>
         {% endfor %}
     </section>
 
@@ -13,26 +18,22 @@
     <form action="">
         <section class="a-section cost-section">
             <h2>Стоимость</h2>
-
         </section>
 
         <section class="a-section color-section">
             <h2>Цвет</h2>
-
         </section>
 
         <section class="a-section material-section">
             <h2>Материал</h2>
-
         </section>
 
         <section class="a-section promotions-section">
             <h2>Акции</h2>
-
         </section>
 
         <section class="a-section new-section">
             <h2>Новинки</h2>
         </section>
     </form>
-</aside>
+</aside>