{% extends "base_list.html" %}
{% load naturalduration %}

{% block title %}Share Analytics for {{ object.media_obj.title }}{% endblock %}

{% block lists %}

<div class="row">

<h1>Share Analytics</h1>
<h2 class="text-muted">{{ object.media_obj.title }}</h2>

<div class="mb-3">
    <span class="badge 
        {% if object.visibility == 'public' %}bg-success
        {% elif object.visibility == 'shared' %}bg-warning text-dark
        {% else %}bg-secondary
        {% endif %}">
        {{ object.get_visibility_display }}
    </span>
    <span class="ms-2"><strong>{{ object.share_view_count }}</strong> view{{ object.share_view_count|pluralize }}</span>
</div>

{% if object.get_share_url %}
<div class="mb-3">
    <span class="text-muted">Share link:</span>
    <code class="small">{{ request.scheme }}://{{ request.get_host }}{{ object.get_share_url }}</code>
</div>
{% endif %}

<h3 class="mt-4">View History</h3>

{% if share_views %}
<table class="table table-striped table-sm">
    <thead>
        <tr>
            <th scope="col">Time</th>
            <th scope="col">IP Address</th>
            <th scope="col">Referrer</th>
            <th scope="col">User Agent</th>
        </tr>
    </thead>
    <tbody>
        {% for view in share_views %}
        <tr>
            <td>{{ view.created|date:"M d, Y H:i" }}</td>
            <td><code>{{ view.ip_address|default:"-" }}</code></td>
            <td class="text-truncate" style="max-width: 200px;">
                {% if view.referrer %}
                <a href="{{ view.referrer }}" target="_blank" rel="noopener">{{ view.referrer }}</a>
                {% else %}-{% endif %}
            </td>
            <td class="text-truncate" style="max-width: 300px;">
                <span title="{{ view.user_agent }}">{{ view.user_agent|default:"-"|truncatechars:60 }}</span>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% else %}
<p class="text-muted">No views yet. Share the link to see who visits.</p>
{% endif %}

<a href="{{ object.get_absolute_url }}" class="btn btn-secondary">Back to scrobble</a>

</div>

{% endblock %}