{% extends 'base.html' %}
{% load static %}

{% block title %}Заявка за Премахване - {{ report.title }}{% endblock %}

{% block extra_css %}
<style>
    .takedown-hero {
        background: linear-gradient(135deg, var(--gov-warning) 0%, #e0a800 100%);
        color: var(--gov-white);
        padding: 3rem 2.5rem;
        border-radius: 12px;
        margin-bottom: 2.5rem;
        text-align: center;
        box-shadow: 0 8px 24px rgba(255, 193, 7, 0.3);
    }
    
    .takedown-hero h1 {
        font-family: 'Roboto Slab', serif;
        font-size: 2.5rem;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
    }
    
    .takedown-hero p {
        font-size: 1.1rem;
        opacity: 0.95;
        line-height: 1.7;
        max-width: 800px;
        margin: 0 auto;
    }
    
    .report-summary {
        background: var(--gov-light);
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 2rem;
        border-left: 4px solid var(--gov-secondary);
    }
    
    .report-summary h3 {
        color: var(--gov-primary);
        margin-bottom: 1rem;
        font-size: 1.25rem;
    }
    
    .report-summary p {
        color: var(--gov-gray);
        margin: 0.5rem 0;
        line-height: 1.6;
    }
    
    .form-section-header {
        background: linear-gradient(135deg, var(--gov-primary) 0%, var(--gov-primary-dark) 100%);
        color: var(--gov-white);
        padding: 2rem 2.5rem;
        border-radius: 12px 12px 0 0;
        margin-bottom: 0;
    }
    
    .form-section-header h2 {
        font-family: 'Roboto Slab', serif;
        margin: 0;
        font-size: 2rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .form-section-header h2::before {
        content: '📋';
        font-size: 2rem;
    }
    
    .takedown-form-card {
        background: var(--gov-white);
        border-radius: 0 0 12px 12px;
        box-shadow: 0 8px 32px rgba(0, 51, 102, 0.15);
        border: 1px solid var(--gov-border);
        overflow: hidden;
        margin-bottom: 2rem;
    }
    
    .takedown-form-body {
        padding: 3rem;
        background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
    }
    
    .info-box {
        background: #fff3cd;
        border: 1px solid #ffc107;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .info-box h4 {
        color: #856404;
        margin: 0 0 0.75rem 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
    
    .info-box h4::before {
        content: 'ℹ️';
    }
    
    .info-box ul {
        margin: 0.75rem 0 0 0;
        padding-left: 1.5rem;
        color: #856404;
    }
    
    .info-box li {
        margin: 0.5rem 0;
        line-height: 1.6;
    }
    
    @media (max-width: 768px) {
        .takedown-hero {
            padding: 2rem 1.5rem;
        }
        
        .takedown-hero h1 {
            font-size: 1.75rem;
        }
        
        .takedown-form-body {
            padding: 2rem 1.5rem;
        }
        
        .form-section-header {
            padding: 1.5rem;
        }
        
        .form-section-header h2 {
            font-size: 1.5rem;
        }
    }
</style>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="takedown-hero">
    <h1>Заявка за Премахване на Доклад</h1>
    <p>Ако сте обект на този доклад и смятате, че информацията е невярна или несправедлива, моля попълнете формата по-долу.</p>
</div>

<!-- Report Summary -->
<div class="report-summary">
    <h3>📄 Доклад, за който се отнася заявката:</h3>
    <p><strong>Заглавие:</strong> <a href="{% url 'reports:detail' report.pk %}">{{ report.title }}</a></p>
    <p><strong>Вид измама:</strong> {{ report.get_scam_type_display }}</p>
    <p><strong>Докладван на:</strong> {{ report.created_at|date:"d F Y" }}</p>
    {% if report.reported_url %}
    <p><strong>URL:</strong> <a href="{{ report.reported_url }}" target="_blank" rel="noopener">{{ report.reported_url }}</a></p>
    {% endif %}
</div>

<!-- Info Box -->
<div class="info-box">
    <h4>Важна информация</h4>
    <ul>
        <li>Всички заявки се преглеждат внимателно от нашия екип</li>
        <li>Ще получите отговор по имейл в рамките на 2-5 работни дни</li>
        <li>Моля, предоставете всички налични доказателства, които подкрепят вашата заявка</li>
        <li>Лъжливи или злонамерени заявки могат да доведат до правни последици</li>
    </ul>
</div>

<!-- Takedown Request Form -->
<div class="takedown-form-card">
    <div class="form-section-header">
        <h2>Форма за Заявка</h2>
    </div>
    <div class="takedown-form-body">
        <form method="post">
            {% csrf_token %}
            
            {# Hidden bot protection fields #}
            {% for field in form.hidden_fields %}
                {{ field }}
            {% endfor %}
            
            <div class="form-row">
                <div class="form-group">
                    <label for="{{ form.requester_name.id_for_label }}">{{ form.requester_name.label }}</label>
                    {{ form.requester_name }}
                    {% if form.requester_name.errors %}
                    <div class="error-message">{{ form.requester_name.errors }}</div>
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <label for="{{ form.requester_email.id_for_label }}">{{ form.requester_email.label }}</label>
                    {{ form.requester_email }}
                    {% if form.requester_email.errors %}
                    <div class="error-message">{{ form.requester_email.errors }}</div>
                    {% endif %}
                </div>
            </div>
            
            <div class="form-group">
                <label for="{{ form.requester_phone.id_for_label }}">{{ form.requester_phone.label }}</label>
                {{ form.requester_phone }}
                {% if form.requester_phone.errors %}
                <div class="error-message">{{ form.requester_phone.errors }}</div>
                {% endif %}
                <small class="form-text">Незадължително поле</small>
            </div>
            
            <div class="form-group">
                <label for="{{ form.reason.id_for_label }}">{{ form.reason.label }}</label>
                {{ form.reason }}
                {% if form.reason.errors %}
                <div class="error-message">{{ form.reason.errors }}</div>
                {% endif %}
                {% if form.reason.help_text %}
                <small class="form-text">{{ form.reason.help_text }}</small>
                {% endif %}
            </div>
            
            <div class="form-group">
                <label for="{{ form.evidence.id_for_label }}">{{ form.evidence.label }}</label>
                {{ form.evidence }}
                {% if form.evidence.errors %}
                <div class="error-message">{{ form.evidence.errors }}</div>
                {% endif %}
                {% if form.evidence.help_text %}
                <small class="form-text">{{ form.evidence.help_text }}</small>
                {% endif %}
            </div>
            
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">Изпрати Заявка</button>
                <a href="{% url 'reports:detail' report.pk %}" class="btn btn-secondary">Отказ</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}