83 lines
4.3 KiB
HTML
83 lines
4.3 KiB
HTML
{% extends 'base/layout.html' %}
|
|
|
|
{% block content %}
|
|
<div style="display: grid; grid-template-columns: 350px 1fr; gap: 2rem; height: calc(100vh - 100px);">
|
|
<!-- Card Search Sidebar -->
|
|
<div
|
|
style="background: var(--card-bg); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; border-radius: 0.5rem; border: 1px solid var(--border-color);">
|
|
<div style="padding: 1rem; border-bottom: 1px solid var(--border-color);">
|
|
<h3 style="margin: 0 0 1rem;">Add Cards</h3>
|
|
<form method="get">
|
|
<input type="text" name="q" value="{{ query|default:'' }}"
|
|
placeholder="Search {{ deck.game.name }} cards..."
|
|
style="width: 100%; padding: 0.5rem; border-radius: 0.25rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color);">
|
|
</form>
|
|
</div>
|
|
|
|
<div style="overflow-y: auto; flex: 1; padding: 1rem;">
|
|
{% if search_results %}
|
|
{% for card in search_results %}
|
|
<div style="display: flex; gap: 0.5rem; margin-bottom: 1rem; align-items: center;">
|
|
{% if card.image_url %}
|
|
<img src="{{ card.image_url }}"
|
|
style="width: 40px; height: 56px; object-fit: cover; border-radius: 2px;">
|
|
{% endif %}
|
|
<div style="flex: 1;">
|
|
<div style="font-size: 0.875rem; font-weight: 500;">{{ card.name }}</div>
|
|
<div style="font-size: 0.75rem; color: #94a3b8;">{{ card.set.code }}</div>
|
|
</div>
|
|
<form method="post">
|
|
{% csrf_token %}
|
|
<input type="hidden" name="card_id" value="{{ card.id }}">
|
|
<button type="submit" class="btn" style="padding: 0.25rem 0.5rem; font-size: 1.25rem;">+</button>
|
|
</form>
|
|
</div>
|
|
{% endfor %}
|
|
{% elif query %}
|
|
<p style="text-align: center; color: #94a3b8;">No cards found.</p>
|
|
{% else %}
|
|
<p style="text-align: center; color: #94a3b8; margin-top: 2rem;">Search to add cards.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deck View -->
|
|
<div style="display: flex; flex-direction: column; overflow: hidden;">
|
|
<div style="margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;">
|
|
<div>
|
|
<h1 style="margin: 0;">{{ deck.name }}</h1>
|
|
<p style="margin: 0.25rem 0 0; color: #94a3b8;">{{ deck.game.name }} • {{ deck.cards.count }} cards
|
|
</p>
|
|
</div>
|
|
<button class="btn">Save & Close</button>
|
|
</div>
|
|
|
|
<div
|
|
style="flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; align-content: start;">
|
|
{% for item in deck.cards.all %}
|
|
<div style="position: relative; group">
|
|
<div
|
|
style="aspect-ratio: 2.5/3.5; background: #000; border-radius: 4px; overflow: hidden; position: relative;">
|
|
{% if item.card.image_url %}
|
|
<img src="{{ item.card.image_url }}" style="width: 100%; height: 100%; object-fit: cover;">
|
|
{% endif %}
|
|
<div
|
|
style="position: absolute; bottom: 0; right: 0; background: rgba(0,0,0,0.8); color: white; padding: 0.25rem 0.5rem; border-top-left-radius: 4px; font-weight: 700;">
|
|
x{{ item.quantity }}
|
|
</div>
|
|
</div>
|
|
<div style="text-align: center; margin-top: 0.25rem;">
|
|
<a href="{% url 'decks:remove_card' deck.id item.card.id %}"
|
|
style="color: #ef4444; font-size: 0.75rem; text-decoration: none;">Remove</a>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div
|
|
style="grid-column: 1/-1; text-align: center; padding: 4rem; border: 2px dashed var(--border-color); border-radius: 0.5rem; color: #94a3b8;">
|
|
<p>Your deck is empty. Add cards from the left sidebar.</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %} |