{% extends "finance/base.html" %}
{% load humanize %}
{% block content %}
<style>
.cr-wrap{padding:18px}.cr-title{font-size:1.8rem;font-weight:650;margin-bottom:4px}
.cr-subtitle{color:#6c757d;margin-bottom:18px}.cr-table th{white-space:nowrap;background:#505b66;color:#fff}
.cr-table td{vertical-align:middle;white-space:nowrap}.cr-text-row{background:#eef2f5;font-weight:700}
.cr-total-row{background:#e7f3eb;font-weight:700}.cr-number{text-align:right;min-width:105px}
</style>
<div class="container-fluid cr-wrap">
  <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
      <div class="cr-title">Cost Recovery</div>
      <div class="cr-subtitle">Cost Recovery report layout. Monthly amounts are shown from ecssumm; ecsfsumm input will be connected later.</div>
    </div>
    <a href="/cost_recovery/design/" class="btn btn-outline-primary">Design / Account Mapping</a>
  </div>

  <form method="get" class="row g-2 mb-3 align-items-end">
    <div class="col-md-3">
      <label class="form-label">Period</label>
      <select name="period" class="form-select">
        <option value="">All design rows</option>
        {% for p in periods %}<option value="{{ p }}" {% if period == p %}selected{% endif %}>{{ p }}</option>{% endfor %}
      </select>
    </div>
    <div class="col-md-4">
      <label class="form-label">Search</label>
      <input type="text" name="q" class="form-control" value="{{ q }}" placeholder="Line, description, or account">
    </div>
    <div class="col-auto"><button class="btn btn-primary">View</button><a href="/cost_recovery/" class="btn btn-outline-secondary">Reset</a></div>
  </form>

  <div class="alert alert-info py-2">
    This screen currently displays the Cost Recovery layout. It does not calculate or write actual values to <code>ecsfsumm</code>.
  </div>

  <div class="table-responsive">
    <table class="table table-bordered table-hover table-sm cr-table">
      <thead>
        <tr>
          <th>Line</th><th>Type</th><th>Description</th><th>Cost Center</th><th>AFE</th><th>Account</th>
          <th class="cr-number">Inception</th><th class="cr-number">Inception LM</th><th class="cr-number">MTD</th><th class="cr-number">YTD</th>
          {% for key,label in months %}<th class="cr-number">{{ label }}</th>{% endfor %}
        </tr>
      </thead>
      <tbody>
      {% for row in rows %}
        <tr class="{% if row.type == 'TEXT' %}cr-text-row{% elif row.type == 'TOTAL' %}cr-total-row{% endif %}">
          <td>{{ row.lineno }}</td><td>{{ row.type }}</td><td>{{ row.descript }}</td>
          <td>{{ row.costcenter }}</td><td>{{ row.afeno }}</td><td>{{ row.acct }}</td>
          <td class="cr-number">{{ row.incep2date|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.incep2lm|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.mtd|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.ytd|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal01|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal02|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal03|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal04|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal05|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal06|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal07|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal08|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal09|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal10|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal11|default:0|floatformat:2|intcomma }}</td>
          <td class="cr-number">{{ row.bal12|default:0|floatformat:2|intcomma }}</td>
        </tr>
      {% empty %}
        <tr><td colspan="22" class="text-center text-muted py-4">No Cost Recovery rows found.</td></tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}