{% extends "base.html" %}
{% block page_title %}My Analytics{% endblock %}
{% block head %}<link rel="stylesheet" href="/plugins/analytics/assets/analytics.css">{% endblock %}
{% block content %}
<main class="analytics-user-page mx-auto w-full max-w-screen-xl px-4 py-6" id="analytics-user-app">
  <header class="analytics-user-header"><div><h1>My Analytics</h1><p>Choose the published metrics that matter to you.</p></div><button type="button" class="blocks-button blocks-button-primary" id="analytics-add-open"><i class="fas fa-plus"></i> Add analytics</button></header>
  <div id="analytics-user-status" role="status" aria-live="polite"></div>
  <section><h2 class="analytics-user-section-title">My dashboard</h2><div id="analytics-user-cards" class="analytics-user-grid"></div><p id="analytics-user-empty" class="analytics-user-empty" hidden>No analytics added yet. Choose a published metric to add it to your dashboard.</p></section>
  <dialog id="analytics-user-picker" class="analytics-dialog analytics-picker-dialog">
    <div class="analytics-editor-form"><div class="analytics-dialog-head"><div><h2>Add analytics</h2><p>Only metrics an administrator has marked public are available here.</p></div><button type="button" class="blocks-icon-button" data-picker-close aria-label="Close"><i class="fas fa-times"></i></button></div><div id="analytics-user-catalog" class="analytics-user-catalog analytics-editor-scroll"></div><div class="analytics-dialog-foot"><button type="button" class="blocks-button blocks-button-secondary" data-picker-close>Done</button></div></div>
  </dialog>
</main>
{% endblock %}
{% block scripts %}<script src="/plugins/analytics/assets/user-dashboard.js"></script>{% endblock %}