{% extends "base.html" %}

{% block title %}Kliknięcia: {{ benefit.name }} - Admin{% endblock %}

{% block extra_css %}
<style>
    .admin-header {
        margin-bottom: var(--spacing-xl);
    }

    .admin-header h1 {
        font-size: var(--font-size-2xl);
        color: var(--text-primary);
    }

    .section {
        background: var(--surface);
        padding: var(--spacing-xl);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }

    .clicks-table {
        width: 100%;
        border-collapse: collapse;
    }

    .clicks-table th,
    .clicks-table td {
        padding: var(--spacing-md);
        text-align: left;
        border-bottom: 1px solid var(--border);
    }

    .clicks-table th {
        font-weight: 600;
        color: var(--text-secondary);
        font-size: var(--font-size-sm);
        text-transform: uppercase;
        background: var(--background);
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--text-secondary);
        margin-bottom: var(--spacing-lg);
        text-decoration: none;
    }

    .back-link:hover {
        color: var(--primary);
    }

    .back-link svg {
        width: 16px;
        height: 16px;
    }

    .empty-state {
        text-align: center;
        padding: var(--spacing-3xl);
        color: var(--text-secondary);
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <a href="{{ url_for('admin.admin_benefits') }}" class="back-link">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="19" y1="12" x2="5" y2="12"></line>
            <polyline points="12 19 5 12 12 5"></polyline>
        </svg>
        Powrót do listy
    </a>

    <div class="admin-header">
        <h1>Kliknięcia: {{ benefit.name }}</h1>
        <p>Łącznie: {{ benefit.click_count or 0 }} kliknięć</p>
    </div>

    <div class="section">
        {% if clicks %}
        <table class="clicks-table">
            <thead>
                <tr>
                    <th>Data</th>
                    <th>Użytkownik</th>
                    <th>IP</th>
                    <th>User Agent</th>
                </tr>
            </thead>
            <tbody>
                {% for click in clicks %}
                <tr>
                    <td>{{ click.clicked_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        {% if click.user %}
                        {{ click.user.email }}
                        {% else %}
                        <em>Anonimowy</em>
                        {% endif %}
                    </td>
                    <td>{{ click.ip_address or '-' }}</td>
                    <td style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                        {{ click.user_agent[:100] if click.user_agent else '-' }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state">
            <p>Brak kliknięć dla tej korzyści.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
