{% load djinsight_tags %}

{% if no_permission %}
<div class="djinsight-no-permission">
    <p>🔒 Access to analytics is restricted to administrators.</p>
    <style>
    .djinsight-no-permission {
        background: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
        text-align: center;
        color: #856404;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    </style>
</div>
{% elif has_stats and obj %}
<div class="djinsight-analytics-widget">
    <h3>{{ display_name }} - Analytics</h3>
    
    <div class="djinsight-stats-overview">
        {% total_views_stat obj=obj %}
        {% unique_views_stat obj=obj %}
        {% last_viewed_stat obj=obj %}
        {% first_viewed_stat obj=obj %}
    </div>
    
    {% if period == "week" or period == "month" %}
    <div class="djinsight-period-stats">
        <h4>{{ period|title }} Statistics</h4>
        <div class="djinsight-period-grid">
            {% views_today_stat obj=obj %}
            {% views_week_stat obj=obj %}
            {% views_month_stat obj=obj %}
        </div>
    </div>
    {% endif %}
    
    <!-- Live statistics counter -->
    {% live_stats_counter obj=obj show_unique=True refresh_interval=30 %}
</div>

<style>
.djinsight-analytics-widget {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.djinsight-analytics-widget h3 {
    margin: 0 0 1rem 0;
    color: #343a40;
    font-size: 1.2rem;
    border-bottom: 2px solid #007bff;
    padding-bottom: 0.5rem;
}

.djinsight-analytics-widget h4 {
    margin: 1.5rem 0 0.5rem 0;
    color: #495057;
    font-size: 1rem;
}

.djinsight-stats-overview,
.djinsight-period-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.djinsight-stat-item {
    background: white;
    padding: 0.75rem;
    border-radius: 4px;
    border-left: 4px solid #007bff;
}

.djinsight-stat-item strong {
    color: #495057;
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.djinsight-stat-value {
    color: #007bff;
    font-size: 1.1rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .djinsight-stats-overview,
    .djinsight-period-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% else %}
<div class="djinsight-no-stats">
    <p>No analytics data available for this object.</p>
    <style>
    .djinsight-no-stats {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
        text-align: center;
        color: #6c757d;
    }
    </style>
</div>
{% endif %} 