{% extends "base.html" %}
{% block title %}Хемиски елементи{% endblock %}

{% block content %}
<div class="container mt-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold text-primary"><i class="bi bi-flask"></i> Хемиски елементи</h2>
        {% if user_role == 'teacher' %}
            <a href="/elements/add" class="btn btn-success">
                <i class="bi bi-plus-circle"></i> Додај нов елемент
            </a>
        {% endif %}
    </div>

    {% if error %}
        <div class="alert alert-warning">{{ error }}</div>
    {% else %}
        <div class="row g-4">
            {% for element in elements %}
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="card element-card shadow-lg border-0 h-100 
                    {% if element.hazard_type and (element.hazard_type != 'Нема опасност' and element.hazard_type != 'Нема') %} element-hazard {% endif %}">
                    
                    <div class="card-body text-center">
                        <div class="element-symbol mb-2">{{ element.symbol }}</div>
                        <h6 class="text-muted">{{ element.element_name }}</h6>

                        <ul class="list-unstyled small mt-3">
                            <li><strong>№:</strong> {{ element.atomic_number }}</li>
                            <li><strong>Маса:</strong> {{ element.atomic_weight }}</li>
                            {% if element.melting_point %}
                                <li>Топење: {{ element.melting_point }}°C</li>
                            {% endif %}
                            {% if element.boiling_point %}
                                <li>Вриење: {{ element.boiling_point }}°C</li>
                            {% endif %}
                        </ul>

                        {% if element.hazard_type and element.hazard_type != 'Нема опасност' %}
                        <span class="badge bg-danger mt-2">⚠ {{ element.hazard_type }}</span>
                        {% else %}
                        <span class="badge bg-success mt-2">✔ Безбедно</span>
                        {% endif %}
                        
                        <div class="d-flex justify-content-center gap-2 mt-3">
                            <a href="/elements/{{ element.element_id }}" class="btn btn-outline-primary btn-sm">
                                <i class="bi bi-search"></i> Детали
                            </a>
                            {% if user_role == 'teacher' %}
                                <a href="/elements/{{ element.element_id }}/edit" class="btn btn-outline-warning btn-sm">
                                    <i class="bi bi-pencil"></i> Едитирај
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="mt-4">
        <a href="/dashboard" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Назад до Dashboard
        </a>
    </div>
</div>

<style>
.element-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 15px;
    background: linear-gradient(145deg, #ffffff, #f1f5f9);
}
.element-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.element-symbol {
    font-size: 2.8rem;
    font-weight: bold;
    color: #0d6efd; /* сина за нормални */
}
/* Ако е опасен елемент */
.element-hazard {
    background: linear-gradient(145deg, #fff5f5, #ffecec);
    border: 1px solid #f5c2c7;
}
.element-hazard .element-symbol {
    color: #dc3545; /* црвена боја за опасни */
}
</style>
{% endblock %}