{% extends "webmail/base.html" %}

{% block title %}Timeline — ign8mail{% endblock %}

{% block ctx_action %}{% url 'timeline' %}{% endblock %}

{% block extra_css %}
<style>
  .timeline-wrap {
    padding: 1rem 1.5rem 2rem;
    overflow-x: auto;
  }
  svg.timeline {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }
  svg.timeline .lane-label {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--muted2);
  }
  svg.timeline .lane-line { stroke: var(--border); stroke-width: 1; }
  svg.timeline .month-label {
    font-family: var(--mono);
    font-size: 10px;
    fill: var(--muted);
  }
  svg.timeline .month-tick { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
  svg.timeline .dot { fill: var(--accent); opacity: 0.85; transition: opacity 0.15s; cursor: pointer; }
  svg.timeline a:hover .dot { opacity: 1; fill: var(--flame); }
  .timeline-summary {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--muted);
    padding: 0.75rem 1.5rem 0;
  }
  .empty { padding: 2rem 1.5rem; color: var(--muted); font-size: 0.85rem; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Timeline{% if context_mailbox %} — {{ context_mailbox }}{% endif %}</h1>
  <span class="sub">mailbox swimlanes · dot size = thread size</span>
</div>
{% if empty %}
<div class="empty">No mail with parseable dates in this window.</div>
{% else %}
<div class="timeline-summary">{{ earliest_label }} → {{ latest_label }}</div>
<div class="timeline-wrap">
  <svg class="timeline" width="{{ svg_width }}" height="{{ svg_height }}"
       viewBox="0 0 {{ svg_width }} {{ svg_height }}">
    {% for lane in lanes %}
    <text class="lane-label" x="12" y="{{ lane.y }}" dominant-baseline="middle">{{ lane.name }}</text>
    <line class="lane-line" x1="{{ left_pad }}" y1="{{ lane.y }}" x2="{{ svg_width }}" y2="{{ lane.y }}" />
    {% for d in lane.dots %}
    <a href="{% url 'thread' d.root_mailbox d.root_uid %}">
      <circle class="dot" cx="{{ d.x }}" cy="{{ d.y }}" r="{{ d.r }}">
        <title>{{ d.subject }} · {{ d.count }} msg{{ d.count|pluralize }} · {{ d.date }}</title>
      </circle>
    </a>
    {% endfor %}
    {% endfor %}
    {% for m in months %}
    <line class="month-tick" x1="{{ m.x }}" y1="{{ svg_height|add:-30 }}" x2="{{ m.x }}" y2="30" />
    <text class="month-label" x="{{ m.x }}" y="{{ svg_height|add:-10 }}" text-anchor="middle">{{ m.label }}</text>
    {% endfor %}
  </svg>
</div>
{% endif %}
{% endblock %}