{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
    <section class="information-section">
        <h2>Information</h2>
        {% if contact_info.information %}
            <p>{{ contact_info.information }}</p>
        {% endif %}
        <p><strong>Email:</strong> {{ contact_info.email }}</p>
        {% if contact_info.signal %}
            <p><strong>Signal:</strong> {{ contact_info.signal }}</p>
        {% endif %}
        {% if contact_info.donation_link %}
            <p><strong>Donations:</strong> <a href="{{ contact_info.donation_link }}" target="_blank">Support us</a></p>
        {% endif %}
    </section>

    <section class="category-list">
        <h2 class="category-title">Item Categories</h2>
        <ul>
            {% for category in categories %}
                <li><a href="{{ url_for('main.category', id=category.id) }}">{{ category.name }}</a></li>
            {% else %}
                <li>No categories available</li>
            {% endfor %}
        </ul>
    </section>

    <h2>Items For Sale</h2>
    <div class="items-grid">
        {% for item in items %}
            <div class="item-card">
                {% if item.image_filename %}
                    <img src="{{ url_for('static', filename='uploads/' + item.image_filename) }}" alt="{{ item.title }}" class="item-image">
                {% else %}
                    <div class="item-image" style="background-color: #eee; display: flex; align-items: center; justify-content: center;">
                        <span>No Image</span>
                    </div>
                {% endif %}
                <h3 class="item-title">{{ item.title }}</h3>
                <p class="item-price">${{ "%.2f"|format(item.price) }}</p>
                <p class="item-status status-{{ item.status|lower|replace(' ', '-') }}">{{ item.status }}</p>
                <p>{{ item.description|truncate(100) }}</p>
                <p>Category: {{ item.category.name }}</p>
            </div>
        {% else %}
            <p>No items available</p>
        {% endfor %}
    </div>


{% endblock %}