{% extends "base.html" %}
{% block title %}Мои експерименти{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>📊 Мои експерименти</h2>
        <p class="text-muted">
            <strong>{{ user_name }}</strong> |
            <span class="badge bg-{{ 'primary' if user_role == 'teacher' else 'success' }}">
                {{ 'Професор' if user_role == 'teacher' else 'Студент' }}
            </span>
        </p>
    </div>
</div>

{% if experiments %}
<!-- Статистики -->
<div class="row mt-3">
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-success">{{ experiments|map(attribute='product')|unique|list|length }}</h3>
                <p class="text-muted mb-0">Различни продукти</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-warning">{{ experiments|selectattr('safety_warning')|list|length }}</h3>
                <p class="text-muted mb-0">Со предупредувања</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-info">
                    {% if experiments[0].participation_timestamp %}
                    {{ experiments[0].participation_timestamp.strftime('%d.%m') }}
                    {% elif experiments[0].time_stamp %}
                    {{ experiments[0].time_stamp.strftime('%d.%m') }}
                    {% endif %}
                </h3>
                <p class="text-muted mb-0">Последен експеримент</p>
            </div>
        </div>
    </div>
</div>

<!-- Листа на експерименти -->
<div class="row mt-4">
    {% for experiment in experiments %}
    <div class="col-md-6 col-lg-4 mb-4">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-gradient" style="background: linear-gradient(45deg, #667eea, #764ba2);">
                <div class="d-flex justify-content-between align-items-center text-white">
                    <span><i class="bi bi-flask"></i> Експеримент #{{ experiment.experiment_id }}</span>
                    <small>
                        {% if experiment.participation_timestamp %}
                        {{ experiment.participation_timestamp.strftime('%d.%m.%Y') }}
                        {% elif experiment.time_stamp %}
                        {{ experiment.time_stamp.strftime('%d.%m.%Y') }}
                        {% endif %}
                    </small>
                </div>
            </div>
            <div class="card-body">
                <!-- Реакција -->
                <div class="reaction-equation text-center mb-3 p-3 bg-light rounded">
                    <strong style="font-size: 18px; color: #764ba2;">
                        {{ experiment.element1_symbol }} + {{ experiment.element2_symbol }} → {{ experiment.product }}
                    </strong>
                </div>

                <!-- Детали -->
                <div class="experiment-details">
                    <p class="mb-2">
                        <strong>Реактанти:</strong><br>
                        <span class="text-muted">{{ experiment.element1_name }} + {{ experiment.element2_name }}</span>
                    </p>

                    <p class="mb-2">
                        <strong>Услови:</strong><br>
                        <span class="text-muted">{{ experiment.conditions or 'Стандардни услови' }}</span>
                    </p>

                    <p class="mb-2">
                        <strong>Резултат:</strong><br>
                        <span class="text-muted">{{ experiment.result[:80] }}{% if experiment.result|length > 80 %}...{%
                            endif %}</span>
                    </p>

                    {% if experiment.safety_warning %}
                    <div class="alert alert-warning py-2 px-2 mb-2">
                        <small><strong>⚠️ Безбедност:</strong> {{ experiment.safety_warning }}</small>
                    </div>
                    {% endif %}

                    {% if experiment.participation_timestamp or experiment.time_stamp %}
                    <p class="text-muted text-center mt-3 mb-0">
                        <small>
                            <i class="bi bi-clock"></i>
                            {% if experiment.participation_timestamp %}
                            {{ experiment.participation_timestamp.strftime('%H:%M:%S') }}
                            {% else %}
                            {{ experiment.time_stamp.strftime('%H:%M:%S') }}
                            {% endif %}
                        </small>
                    </p>
                    {% endif %}
                    {% if experiment.equipment and experiment.equipment|length > 0 %}
                    <p class="mb-2">
                        <strong>Опрема:</strong>
                    <ul class="small text-muted mb-0">
                        {% for eq in experiment.equipment %}
                        <li>
                            {{ eq.equipment_name }}
                            {% if eq.type %}<span class="text-secondary">({{ eq.type }})</span>{% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                    </p>
                    {% else %}
                    <p class="mb-2">
                        <strong>Опрема:</strong>
                        <span class="text-muted">Нема евидентирана опрема</span>
                    </p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<!-- Нема експерименти -->
<div class="row mt-4">
    <div class="col-12">
        <div class="alert alert-info text-center">
            <h4>📚 Немате извршено експерименти</h4>
            <p>Започнете со користење на виртуелната лабораторија за да создадете ваши експерименти.</p>
            <a href="/laboratory" class="btn btn-primary">🔬 Отвори лабораторија</a>
        </div>
    </div>
</div>
{% endif %}

<div class="mt-4 text-center">
    <a href="/dashboard" class="btn btn-secondary">🏠 Dashboard</a>
    <a href="/laboratory" class="btn btn-success">➕ Нов експеримент</a>
    {% if user_role == 'teacher' %}
    <a href="/experiments" class="btn btn-info">📋 Сите експерименти</a>
    {% endif %}
</div>
{% endblock %}