{% extends 'base.html' %}

{% block title %}{{ item.name }} - Boycott List Dot Info{% endblock %}

{% block content %}
<div class="item-detail-container">

    <!-- Edit/Delete Button Top Right -->
<div class="edit-button-container">
    <a href="{% url 'edit_item' item.id %}" class="btn btn-sm btn-warning">✏️ Edit</a>
    <form method="post" action="{% url 'delete_item' item.id %}" style="display:inline;" onsubmit="return confirm('Are you sure you want to delete this item?');">
        {% csrf_token %}
        <button type="submit" class="btn btn-sm btn-danger ms-2">🗑️ Delete</button>
    </form>
</div>



    {% if messages %}
        <div class="mt-4">
            {% for message in messages %}
                <div class="alert alert-success">{{ message }}</div>
            {% endfor %}
        </div>
    {% endif %}
    
    <div class="item-header">
        <h1>{{ item.name }}</h1>
        {% if item.logo %}
            <img src="{{ item.logo.url }}" alt="{{ item.name }}" class="item-logo-large">
        {% else %}
            <div class="item-logo-placeholder">No Image</div>
        {% endif %}
    </div>

    <div class="item-description">
        <h3>Description</h3>
        <p>{{ item.description }}</p>
    </div>

    <div class="item-reason">
        <h3>Reason for Boycott</h3>
        <p>{{ item.reason_for_boycott }}</p>
    </div>

    <div class="item-source">
        <h3>Source</h3>
        <a href="{{ item.source }}" target="_blank" class="source-link">Visit Source 🔗</a>
    </div>

    <!-- Show Safe Products Section -->
    {% if item.safe_items.all %}
        <div class="safe-products">
            <h3>Safe Products Related to "{{ item.name }}"</h3>
            <ul>
                {% for safe_item in item.safe_items.all %}
                    <li><a href="{% url 'item_detail' safe_item.id %}">{{ safe_item.name }}</a></li>
                {% empty %}
                    <li>No safe items available.</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
</div>

<div style="height: 100px;"></div>

<style>
    .item-detail-container {
        position: relative;
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
        background-color: #fff;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        border-radius: 10px;
    }

    .edit-button-container {
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .item-header {
        text-align: center;
    }

    .item-logo-large {
        width: 200px;
        height: 200px;
        object-fit: contain;
        margin: 20px 0;
    }

    .item-description, .item-reason, .item-source {
        margin-top: 20px;
    }

    .item-description h3, .item-reason h3, .item-source h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .item-description p, .item-reason p {
        font-size: 16px;
        color: #555;
    }

    .source-link {
        color: #007bff;
        text-decoration: none;
        font-size: 16px;
    }

    .source-link:hover {
        text-decoration: none;
    }

    /* Safe Products Section */
    .safe-products {
        margin-top: 30px;
    }

    .safe-products h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .safe-products ul {
        list-style-type: none;
        padding: 0;
    }

    .safe-products ul li {
        font-size: 16px;
        color: #333;
        margin: 5px 0;
    }

    .safe-products ul li a {
        text-decoration: none;
        color: #007bff;
    }

    .safe-products ul li a:hover {
        text-decoration: underline;
    }
</style>
{% endblock %}