{% extends "user_layout.html" %}

{% block title %}Short URL Analytics - /{{ url_code }} - BZOD{% endblock %}

{% block active_urls %}active{% endblock %}

{% block header_title %}URL Analytics: /{{ url_code }}{% endblock %}

{% block header_actions %}
<a href="/user/urls" class="btn btn-secondary" style="padding: 0.5rem 1rem; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.25rem;">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
    Back to URLs
</a>
{% endblock %}

{% block content %}
<!-- Link Details Card -->
<div class="card" style="margin-bottom: 2rem;">
    <h3 style="font-size: 1.1rem; margin-bottom: 1rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem;">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
        Link Details
    </h3>
    <div>
        <span style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 0.25rem;">Destination URL</span>
        <a href="{{ destination }}" target="_blank" style="color: var(--accent-color); text-decoration: none; font-weight: 600; word-break: break-all;">
            {{ destination }}
        </a>
    </div>
</div>

<!-- Visitor Activity Log -->
<div class="card" style="padding: 0; overflow: hidden;">
    <div style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color);">
        <h3 style="font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; margin: 0;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
            Visitor Activity Log
        </h3>
    </div>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Sr</th>
                    <th>Timestamp</th>
                    <th>IP Address</th>
                    <th>Country</th>
                    <th>Referrer</th>
                    <th>Browser</th>
                    <th>User-Agent</th>
                    <th>UTM Source</th>
                    <th>UTM Campaign</th>
                </tr>
            </thead>
            <tbody>
                {% if visits.is_empty() %}
                    <tr>
                        <td colspan="9" style="text-align: center; color: var(--text-secondary); padding: 3rem;">
                            No visitor activity available for this short link.
                        </td>
                    </tr>
                {% else %}
                    {% for entry in visits %}
                        <tr>
                            <td>{{ entry.sr }}</td>
                            <td style="font-family: monospace; font-size: 0.85rem; white-space: nowrap;">{{ entry.timestamp }}</td>
                            <td style="font-family: monospace; font-size: 0.85rem;">{{ entry.ip_address }}</td>
                            <td>
                                {% if entry.country == "Unknown" %}
                                    <span style="color: var(--text-muted);">Unknown</span>
                                {% else %}
                                    {{ entry.country }}
                                {% endif %}
                            </td>
                            <td>{{ entry.referrer }}</td>
                            <td>{{ entry.browser }}</td>
                            <td style="max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--text-secondary);" title="{{ entry.user_agent }}">
                                {{ entry.user_agent }}
                            </td>
                            <td>{{ entry.utm_source }}</td>
                            <td>{{ entry.utm_campaign }}</td>
                        </tr>
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}