{% extends "cms/base.html" %}
{% block title %}Analysis{% endblock %}
{% block page_title %}Analysis{% endblock %}
{% block extra_head %}
<style>
  .vv-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem; }
  .vv-neg { color:#b91c1c; }
  .vv-sub { font-size:.75rem;color:var(--cms-muted);margin-top:2px; }
</style>
{% endblock %}
{% block cms_content %}
<div class="vv-grid">
  <div class="cms-card">
    <h3 style="margin-top:0">Profit and Loss by Year</h3>
    <table class="cms-table" style="width:100%">
      <thead><tr><th style="text-align:left">Year</th><th>Events</th><th>Revenue</th><th style="text-align:right">P&amp;L</th></tr></thead>
      <tbody>{% for key, b in by_year %}
        <tr><td style="text-align:left">{{ key }}</td><td>{{ b.events }}</td><td>{{ b.rev|floatformat:0 }}</td>
        <td style="text-align:right">{% if b.pl < 0 %}<span class="vv-neg">{{ b.pl|floatformat:0 }}</span>{% else %}{{ b.pl|floatformat:0 }}{% endif %}</td></tr>
      {% endfor %}</tbody>
    </table>
  </div>

  <div class="cms-card">
    <h3 style="margin-top:0">Net by Brand</h3>
    <table class="cms-table" style="width:100%">
      <thead><tr><th style="text-align:left">Brand</th><th>Events</th><th style="text-align:right">P&amp;L</th></tr></thead>
      <tbody>{% for key, b in by_brand %}
        <tr><td style="text-align:left">{{ key }}</td><td>{{ b.events }}</td>
        <td style="text-align:right">{% if b.pl < 0 %}<span class="vv-neg">{{ b.pl|floatformat:0 }}</span>{% else %}{{ b.pl|floatformat:0 }}{% endif %}</td></tr>
      {% endfor %}</tbody>
    </table>
  </div>

  <div class="cms-card">
    <h3 style="margin-top:0">Net by City</h3>
    <table class="cms-table" style="width:100%">
      <thead><tr><th style="text-align:left">City</th><th>Events</th><th style="text-align:right">P&amp;L</th></tr></thead>
      <tbody>{% for key, b in by_city %}
        <tr><td style="text-align:left">{{ key }}</td><td>{{ b.events }}</td>
        <td style="text-align:right">{% if b.pl < 0 %}<span class="vv-neg">{{ b.pl|floatformat:0 }}</span>{% else %}{{ b.pl|floatformat:0 }}{% endif %}</td></tr>
      {% endfor %}</tbody>
    </table>
  </div>

  <div class="cms-card">
    <h3 style="margin-top:0">Best Five</h3>
    <table class="cms-table" style="width:100%">
      <tbody>{% for r in best %}
        <tr><td style="text-align:left"><a href="{% url 'cms_veventa_event' r.obj.pk %}" style="text-decoration:none">{{ r.obj.name }}</a>
        <div class="vv-sub">{{ r.obj.city }}</div></td>
        <td style="text-align:right">{{ r.pl|floatformat:0 }}</td></tr>
      {% endfor %}</tbody>
    </table>
  </div>

  <div class="cms-card">
    <h3 style="margin-top:0">Worst Five</h3>
    <table class="cms-table" style="width:100%">
      <tbody>{% for r in worst %}
        <tr><td style="text-align:left"><a href="{% url 'cms_veventa_event' r.obj.pk %}" style="text-decoration:none">{{ r.obj.name }}</a>
        <div class="vv-sub">{{ r.obj.city }}</div></td>
        <td style="text-align:right" class="vv-neg">{{ r.pl|floatformat:0 }}</td></tr>
      {% endfor %}</tbody>
    </table>
  </div>
</div>
{% endblock %}