inital checkin

templates/raffle/item_detail.html

@@ -0,0 +1,54 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="glassmorphism" style="max-width: 800px; margin: 0 auto; padding: 2.5rem;">
+    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 2rem;">
+        <div>
+            <span style="color:var(--primary); font-weight: 800;">#{{ item.item_number }}</span>
+            <h2>{{ item.title }}</h2>
+        </div>
+        <div style="display: flex; gap: 0.5rem;">
+            <a href="{% url 'item_update' item.pk %}" class="btn-secondary-small">Edit</a>
+            <a href="{% url 'item_delete' item.pk %}" class="btn-danger" style="padding: 0.5rem 1rem;">Delete</a>
+        </div>
+    </div>
+
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
+        <div>
+            {% if item.picture %}
+            <img src="{{ item.picture.url }}" style="width: 100%; border-radius: 8px;" alt="{{ item.title }}">
+            {% else %}
+            <div
+                style="height: 300px; background: var(--secondary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--text-muted);">
+                No Image Available</div>
+            {% endif %}
+
+            <p style="margin-top: 1.5rem; color: var(--text-muted); line-height: 1.6;">{{ item.description|linebreaksbr
+                }}</p>
+        </div>
+
+        <div>
+            <div class="glassmorphism" style="padding: 1.5rem; box-shadow: none; background: var(--secondary);">
+                <h3 style="margin-bottom: 1rem; font-size: 1.1rem; color: var(--primary);">Favorite Activity</h3>
+                <p style="margin-bottom: 1rem; font-size: 0.9rem;">Total Favorites: <strong
+                        style="font-size: 1.25rem;">{{ item.favorited_by.count }}</strong></p>
+
+                {% if item.favorited_by.count > 0 %}
+                <ul style="list-style: none; display: flex; flex-direction: column; gap: 0.5rem;">
+                    {% for fav in item.favorited_by.all %}
+                    <li
+                        style="padding: 0.75rem; background: var(--secondary); border-radius: 6px; display: flex; align-items: center; gap: 0.5rem;">
+                        <div style="width:8px; height:8px; border-radius:50%; background:var(--primary);"></div>
+                        {{ fav.user.username }}
+                        <span style="color:var(--text-muted); font-size:0.8rem; margin-left:auto;">{{
+                            fav.created_at|date:"M d, Y" }}</span>
+                    </li>
+                    {% endfor %}
+                </ul>
+                {% else %}
+                <p style="color: var(--text-muted); font-size: 0.9rem;">No one has favorited this item yet.</p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}