{% macro render_package_stats_js() %}
	<script src="/static/libs/chart.min.js"></script>
	<script src="/static/libs/chartjs-adapter-date-fns.bundle.min.js"></script>
	<script src="/static/libs/chartjs-plugin-annotation.min.js"></script>
	<script src="/static/js/package_charts.js?v=2"></script>
{% endmacro %}


{% macro render_package_selector(user, package=None) %}
	<nav class="dropdown d-inline-block">
		<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			{% if package %}
				{{ package.title }}
			{% else %}
				{{ _("%(display_name)s's packages", display_name=user.display_name) }}
			{% endif %}
		</button>
		<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
			<a class="dropdown-item" href="{{ url_for('users.statistics', username=user.username) }}">
				{{ _("%(display_name)s's packages", display_name=user.display_name) }}
			</a>
			<div class="dropdown-divider"></div>
			{% for package in user.packages.filter_by(state='APPROVED').all() %}
				<a class="dropdown-item" href="{{ package.get_url('packages.statistics') }}">
					{{ package.title }}
				</a>
			{% endfor %}
		</div>
	</nav>
{% endmacro %}


{% macro render_daterange_selector(options, is_active) %}
	<nav class="dropdown d-inline-block me-2">
		<button class="btn {% if is_active %}btn-primary{% else %}btn-secondary{% endif %} dropdown-toggle" type="button" id="dropdownDateRange" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			{{ _("Date range...") }}
		</button>
		<div class="dropdown-menu" aria-labelledby="dropdownDateRange">
			{% for option in options %}
				<a class="dropdown-item" href="{{ option[1] }}">{{ option[0] }}</a>
			{% endfor %}
		</div>
	</nav>
{% endmacro %}


{% macro render_package_stats(source, downloads, is_range) %}
	<div class="d-none">
		<span id="downloads-7days">
			{{ _("Downloads, past 7 days") }}
		</span>
		<span id="downloads-30days">
			{{ _("Downloads, past 30 days") }}
		</span>
		<span id="downloads-range">
			{{ _("Downloads from $1 to $2") }}
		</span>
		<span id="downloads-per-day">
			{{ _("$1 per day") }}
		</span>
	</div>
	<noscript>
		<p class="alert alert-danger">
			{{ _("JavaScript is required to display charts and statistics") }}
		</p>
	</noscript>
	<div class="row mb-5" id="stats-summaries">
		<div class="col-md-4" id="lifetime-downloads">
			<div class="card h-100">
				<div class="card-body align-items-center text-center">
					<div class="mt-0 mb-3">
						<i class="fas fa-download me-1"></i>
						{{ _("Lifetime unique downloads") }}
					</div>
					<div class="my-0 h4">
						{{ downloads }}
					</div>
				</div>
			</div>
		</div>
	</div>

	<div id="loading">{{ _("Loading...") }}</div>

	<div id="empty-view" style="display: none;">
		{{ _("No data") }}
	</div>

	<div id="stats-root" data-source="{{ source }}" data-is-range="{{ is_range and 'true' or 'false' }}" style="display: none;">
		<section id="downloads-by-package" class="d-none">
			<h3>{{ _("Downloads by Package") }}</h3>
			<p class="text-muted">
				{{ _("This is a stacked area graph. For total downloads, look at the combined height.") }}
			</p>
			<canvas id="chart-packages" class="chart"></canvas>
		</section>

		<h3>{{ _("Downloads by Client") }}</h3>
		<p class="text-muted">
			{{ _("This is a stacked area graph. For total downloads, look at the combined height.") }}
		</p>
		<canvas id="chart-platform" class="chart"></canvas>

		<h3 class="mt-5">{{ _("Downloads by Reason") }}</h3>
		<ul>
			<li>{{ _("<b>New Install</b>: the user clicked [Install] inside of Minetest.") }}</li>
			<li>{{ _("<b>Dependency</b>: was installed automatically to fulfill a dependency.") }}</li>
			<li>{{ _("<b>Update</b>: download was to update the package.") }}</li>
			<li>{{ _("<b>Other / Unknown</b>: downloaded by a web browser or an outdated Minetest version (before 5.5).") }}</li>
		</ul>
		<p class="text-muted">
			{{ _("This is a stacked area graph. For total downloads, look at the combined height.") }}
		</p>
		<canvas id="chart-reason" class="chart"></canvas>
		<div class="row mt-4 mb-5">
			<div class="col-md-6">
				<canvas id="chart-reason-pie" class="chart"></canvas>
			</div>
		</div>

		<h3 style="margin-top: 6em;">{{ _("Need more stats?") }}</h3>
		<p>
			{{ _("Check out the ContentDB Grafana dashboard for CDB-wide stats") }}
		</p>
		<p>
			<a href="https://monitor.rubenwardy.com/d/3ELzFy3Wz/contentdb" class="btn btn-primary">
				{{ _("ContentDB Grafana") }}
			</a>
		</p>
	</div>
{% endmacro %}