{% extends "alloc/base.html" %}
{% load alloc_extras %}
{% block title %}{{ row.code }}{% endblock %}
{% block content %}
{% if row %}
<p><a href="{% url 'profit' kind %}?{{ qs }}">&larr; {{ kind|capfirst }}</a></p>
<h1>{{ row.code }} {% if row.name != row.code %}{{ row.name }}{% endif %}{% if row.channel %} <small>{{ row.channel }}</small>{% endif %}</h1>
{% include "alloc/_selector.html" %}
<div class="kpis">
  <div><span>Revenue</span><b>{{ row.revenue|money }}</b></div>
  <div><span>Direct margin</span><b>{{ row.direct_margin|money }}</b></div>
  <div><span>Activity cost</span><b>{{ row.activity_cost|money }}</b></div>
  <div><span>ABC profit</span><b class="{{ row.profit|sign }}">{{ row.profit|money }} ({{ row.margin_pct|pct }})</b></div>
  <div><span>Traditional profit</span><b class="{{ row.trad_profit|sign }}">{{ row.trad_profit|money }}</b></div>
</div>
{% if row.flag %}<p><span class="flag {{ row.flag|slugify }}">{{ row.flag }}</span> Traditional costing assigns {{ row.trad_overhead|money }} of overhead from {{ row.labor_hours|money }} labour hours; ABC assigns {{ row.activity_cost|money }}.</p>{% endif %}
<section><h2>Profit waterfall</h2>
<svg viewBox="0 0 {{ wf.width }} {{ wf.height }}" class="chart" role="img" aria-label="Profit waterfall">
  {% for t in wf.ticks %}<line x1="{{ wf.left }}" x2="{{ wf.right }}" y1="{{ t.y }}" y2="{{ t.y }}" class="grid"/><text x="{{ wf.left }}" dx="-6" y="{{ t.y }}" dy="4" text-anchor="end" class="tick">{{ t.label }}</text>{% endfor %}
  <line x1="{{ wf.left }}" x2="{{ wf.right }}" y1="{{ wf.zero_y }}" y2="{{ wf.zero_y }}" class="zero"/>
  {% for b in wf.bars %}<rect x="{{ b.x }}" y="{{ b.y }}" width="{{ b.w }}" height="{{ b.h }}" class="bar {{ b.cls }}"><title>{{ b.label }}: {{ b.value|money }}</title></rect>
  <text x="{{ b.lx }}" y="{{ b.ly }}" text-anchor="middle" class="tick">{{ b.value|money }}</text>
  <text x="{{ b.lx }}" y="{{ wf.label_y }}" text-anchor="end" transform="rotate(-35 {{ b.lx }} {{ wf.label_y }})" class="tick">{{ b.label }}</text>{% endfor %}
</svg></section>
<section><h2>Activity costs</h2>
<table><tr><th>Activity</th><th class="num">Cost</th><th class="num">Share</th></tr>
{% for name, cost in activities %}<tr><td>{{ name }}</td><td class="num">{{ cost|money }}</td><td class="num">{% widthratio cost row.activity_cost 100 %}%</td></tr>{% endfor %}</table></section>
{% else %}{% include "alloc/_selector.html" %}{% endif %}
{% endblock %}