{% extends "base.html" %}

{% block content %}
<div class="layout-sidebar">
    <div>
        <h2 class="section-title">Галерея</h2>
        
        {% if artworks %}
        <div class="grid grid-2">
            {% for art in artworks %}
            <div class="card">
                <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
                    <span>#{{ art.id }} • {{ art.created_at[:10] if art.created_at else 'Новое' }}</span>
                    {% if art.is_private %}
                        <span style="background: var(--red); color: white; padding: 2px 8px; font-size: 10px;">ПРИВАТНАЯ</span>
                    {% endif %}
                </div>
                <div class="card-body">
                    <h5 class="card-title">{{ art.title }}</h5>
                    
                    <div class="art-preview mb-2" style="height: 180px;">
                        <canvas id="art-{{ art.id }}" width="400" height="180"></canvas>
                    </div>
                    
                    {% if art.signature %}
                    <div class="artwork-signature mb-2" style="padding: 10px; background: #f0f0f0; border-left: 3px solid var(--red); font-style: italic;">
                        <small style="color: #666;">Подпись художника:</small><br>
                        {{ art.signature }}
                    </div>
                    {% endif %}
                    
                    <div class="text-price mb-2">
                        {{ art.price }} <span>₽</span>
                    </div>
                    
                    <p class="text-muted mb-2">
                        Владелец: 
                        {% if art.owner_id == session.user_id %}
                            <strong>Вы</strong>
                        {% else %}
                            {{ art.owner_name }}
                        {% endif %}
                    </p>
                    
                    {% if art.owner_id != session.user_id %}
                        <a href="{{ url_for('buy_artwork', artwork_id=art.id) }}" class="btn btn-primary">Купить</a>
                    {% else %}
                        <span class="badge badge-success">Ваша работа</span>
                        <a href="{{ url_for('artwork_settings', artwork_id=art.id) }}" class="btn btn-outline btn-small" style="margin-left: 10px;">Настройки</a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="info-block">
            <p>Галерея пуста. Станьте первым художником — создайте свою супрематическую композицию!</p>
        </div>
        {% endif %}
    </div>
    
    <aside>
        <div class="card mb-3">
            <div class="card-header">◼ Создать работу</div>
            <div class="card-body">
                <form method="POST" action="{{ url_for('create_artwork') }}">
                    <div class="form-group">
                        <label for="price" class="form-label">Цена</label>
                        <input type="number" class="form-control" id="price" name="price" value="100" min="1" required>
                    </div>
                    <div class="form-group">
                        <label for="signature" class="form-label">Подпись художника</label>
                        <textarea class="form-control" id="signature" name="signature" 
                                  rows="2" placeholder="Ваша творческая подпись..."></textarea>
                    </div>
                    <div class="form-group">
                        <label for="description" class="form-label">Описание (опционально)</label>
                        <textarea class="form-control" id="description" name="description" 
                                  rows="2" placeholder="Концепция работы..."></textarea>
                    </div>
                    <div class="form-group" style="display: flex; align-items: center; gap: 10px;">
                        <input type="checkbox" id="is_private" name="is_private" value="1" style="width: 20px; height: 20px;">
                        <label for="is_private" style="margin: 0; cursor: pointer;">Приватная работа</label>
                    </div>
                    <button type="submit" class="btn btn-success" style="width: 100%;">Создать композицию</button>
                </form>
            </div>
        </div>
        
        <div class="card mb-3">
            <div class="card-header">◉ Поиск</div>
            <div class="card-body">
                <form action="{{ url_for('search') }}" method="GET">
                    <div class="form-group">
                        <input type="text" class="form-control" name="q" placeholder="Название или данные...">
                    </div>
                    <button class="btn btn-secondary" type="submit" style="width: 100%;">Найти</button>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-header">▲ Действия</div>
            <div class="card-body">
                <a href="{{ url_for('profile') }}" class="btn btn-outline mb-1" style="width: 100%;">Мой профиль</a>
                <a href="{{ url_for('import_artwork') }}" class="btn btn-outline" style="width: 100%;">Импорт картины</a>
            </div>
        </div>
    </aside>
</div>

<script>
const artworksData = {{ artworks|tojson }};

function drawArt(canvas, artData) {
    try {
        const ctx = canvas.getContext('2d');
        const shapes = JSON.parse(artData);
        
        ctx.fillStyle = '#F5F0E6';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        const scale = canvas.width / 100;
        
        shapes.forEach(shape => {
            ctx.save();
            ctx.fillStyle = shape.color;
            ctx.strokeStyle = shape.color;
            ctx.lineWidth = 3;
            
            const x = shape.x * scale;
            const y = shape.y * scale;
            const w = shape.width * scale;
            const h = shape.height * scale;
            const angle = (shape.angle || 0) * Math.PI / 180;
            
            const cx = x + w / 2;
            const cy = y + h / 2;
            
            if (shape.type === 'rectangle' || shape.type === 'rotated_rect') {
                ctx.translate(cx, cy);
                ctx.rotate(angle);
                ctx.fillRect(-w/2, -h/2, w, h);
            } else if (shape.type === 'circle') {
                ctx.beginPath();
                ctx.arc(cx, cy, Math.min(w, h) / 2, 0, Math.PI * 2);
                ctx.fill();
            } else if (shape.type === 'triangle') {
                ctx.translate(cx, cy);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.moveTo(0, -h/2);
                ctx.lineTo(w/2, h/2);
                ctx.lineTo(-w/2, h/2);
                ctx.closePath();
                ctx.fill();
            } else if (shape.type === 'line') {
                ctx.translate(cx, cy);
                ctx.rotate(angle);
                ctx.beginPath();
                ctx.moveTo(-w/2, 0);
                ctx.lineTo(w/2, 0);
                ctx.lineWidth = h || 4;
                ctx.stroke();
            }
            ctx.restore();
        });
    } catch (e) {
        console.error('Drawing error:', e);
    }
}

document.addEventListener('DOMContentLoaded', function() {
    artworksData.forEach(art => {
        const canvas = document.getElementById('art-' + art.id);
        if (canvas) {
            drawArt(canvas, art.data);
        }
    });
});
</script>
{% endblock %}