{% extends "wagtailadmin/base.html" %}
{% load i18n %}

{% block titletag %}{% trans "Subscription Analytics" %}{% endblock %}

{% block content %}
<header class="header">
    <h1>{% trans "Subscription Analytics" %}</h1>
</header>

<div class="analytics-dashboard" style="padding-left: 50px; padding-right: 50px;">
    <div class="metrics-grid">
        <div class="metric-card">
            <h3>{% trans "Monthly Recurring Revenue" %}</h3>
            <div class="metric-value">${{ mrr|floatformat:2 }}</div>
        </div>
        
        <div class="metric-card">
            <h3>{% trans "Active Subscriptions" %}</h3>
            <div class="metric-value">{{ total_subscriptions }}</div>
        </div>
        
        <div class="metric-card">
            <h3>{% trans "Churn Rate" %}</h3>
            <div class="metric-value">{{ churn_rate|floatformat:1 }}%</div>
        </div>
        
        <div class="metric-card">
            <h3>{% trans "Conversion Rate" %}</h3>
            <div class="metric-value">{{ conversion_rate|floatformat:1 }}%</div>
        </div>
    </div>
    
    <div class="charts-section">
        <div class="chart-container">
            <h3>{% trans "Revenue Trend" %}</h3>
            <div id="revenue-chart"></div>
        </div>
        
        <div class="chart-container">
            <h3>{% trans "Subscription Growth" %}</h3>
            <div id="growth-chart"></div>
        </div>
    </div>
</div>

<style>
.analytics-dashboard {
    padding: 20px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.metric-card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.metric-value {
    font-size: 2em;
    font-weight: bold;
    color: #007cba;
}

.charts-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.chart-container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
{% endblock %}