{% extends "admin/base_site.html" %}

{% block extrastyle %}{{ block.super }}
<style>
  /* Colors come from admin's own variables so the path follows the
     light/dark theme toggle. */
  .uxlite-roadmap { list-style: none; margin: 1em 0 0; padding: 0 0 0 8px; }
  .uxlite-roadmap li {
    position: relative;
    padding: 0 0 26px 30px;
    border-left: 2px dotted var(--border-color, #b9c2cc);
  }
  .uxlite-roadmap li:last-child { border-left-color: transparent; padding-bottom: 4px; }
  /* Solid connector through the reached steps, dotted for the ones still ahead. */
  .uxlite-roadmap li.reached {
    border-left-style: solid;
    border-left-color: var(--object-tools-bg, #2e7d32);
  }
  .uxlite-roadmap li .dot {
    position: absolute; left: -9px; top: 0;
    width: 16px; height: 16px; border-radius: 50%;
    box-sizing: border-box; background: var(--body-bg, #fff);
  }
  .uxlite-roadmap li.reached .dot {
    background: var(--object-tools-bg, #2e7d32);
    border: 2px solid var(--object-tools-bg, #2e7d32);
  }
  .uxlite-roadmap li.pending .dot { border: 2px dashed var(--border-color, #b9c2cc); }
  .uxlite-roadmap .label { font-weight: 600; }
  .uxlite-roadmap li.pending .label { color: var(--body-quiet-color, #8a949e); font-weight: 500; }
  .uxlite-roadmap .when {
    color: var(--body-quiet-color, #666); font-size: 0.9em; margin-left: 8px;
  }
  .uxlite-roadmap .meta {
    display: block; color: var(--body-quiet-color, #666); font-size: 0.85em;
    font-family: monospace; margin-top: 2px;
  }
  .uxlite-progress { color: var(--body-quiet-color, #666); margin: 0; }
</style>
{% endblock %}

{% block content %}
{# The <h1> comes from admin's content_title block, driven by `title`. #}
{% if roadmap %}
<p class="uxlite-progress">{{ reached_count }} of {{ roadmap|length }} milestones reached</p>

<ul class="uxlite-roadmap">
  {% for step in roadmap %}
  <li class="{% if step.reached %}reached{% else %}pending{% endif %}">
    <span class="dot"></span>
    <span class="label">{{ step.label }}</span>
    {% if step.reached %}
      <span class="when">{{ step.at }}</span>
      {% if step.meta %}<span class="meta">{{ step.meta }}</span>{% endif %}
    {% else %}
      <span class="when">not yet</span>
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% else %}
<p>No milestones to show for this user yet.
{% if not milestones_configured %}
  Set <code>UXLITE_ROADMAP_MILESTONES</code> in settings to define the steps you
  want tracked, e.g.
  <code>["signed_up", ("checkout_completed", "First purchase")]</code>.
{% endif %}
</p>
{% endif %}
{% endblock %}