{% extends "base.html" %}

{% block content %}
<div class="container" style="max-width: 800px; margin: 0 auto;">
    <div class="card mb-3">
        <div class="card-header">◼ Импорт картины по URL</div>
        <div class="card-body">
            <p>Загрузите супрематическую композицию с внешнего ресурса.</p>
            
            <form method="POST">
                <div class="form-group">
                    <input type="text" class="form-control" name="artwork_url" 
                           placeholder="https://example.com/artwork.json" value="">
                    <p class="text-muted" style="font-size: 12px; margin-top: 5px;">
                        Укажите URL файла с данными картины в формате JSON.
                    </p>
                </div>
                <button type="submit" class="btn btn-primary">Загрузить</button>
            </form>
            
            <div style="background: #f5f5f5; padding: 15px; font-family: monospace; font-size: 12px; margin-top: 20px;">
                <strong>Формат JSON:</strong><br>
                {"title": "Название", "price": 100, "signature": "Подпись",<br>
                "shapes": [{"type": "rectangle", "x": 10, "y": 10, "width": 30, "height": 20, "color": "#E41E26"}]}
            </div>
            
            <p style="margin-top: 20px;">
                <a href="{{ url_for('index') }}" style="color: var(--red);">← Вернуться в галерею</a>
            </p>
        </div>
    </div>
    
    {% if success %}
    <div class="card mb-3" style="background: #28a745; color: white;">
        <div class="card-body">{{ success }}</div>
    </div>
    {% endif %}
    
    {% if error %}
    <div class="card mb-3" style="background: var(--red); color: white;">
        <div class="card-body">{{ error }}</div>
    </div>
    {% endif %}
    
    {% if preview_content and not success %}
    <div class="card">
        <div class="card-header">
            Ответ сервера{% if fetched_url %} ({{ fetched_url }}){% endif %}
        </div>
        <div class="card-body">
            <pre style="background: #1a1a1a; color: #f5f0e6; padding: 20px; max-height: 400px; overflow: auto; white-space: pre-wrap; word-break: break-all;">{{ preview_content }}</pre>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}