{% extends "wagtailadmin/generic/base.html" %}
{% load wagtailadmin_tags i18n %}

{% block extra_css %}
    {{ block.super }}
    {{ media.css }}
{% endblock %}

{% block content %}
    {% fragment as header_title %}
        {% block branding_welcome %}{{ site_name }}{% endblock %}
    {% endfragment %}
    <div class="w-dashboard w-px-6 sm:w-px-[3.75rem] w-mt-16 sm:w-mt-10 lg:w-mt-[3.75rem]">
      <h1>{{ cage.name | upper }} ({{ cage.ref_number }})</h1>
      <br />
      {{ kpi_html | safe }}
      <br />

      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Weight Chart</a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">FCR Chart</button>
      </p>

      <div class="row">
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card card-body">
              {{ weight_chart_html | safe }}
            </div>
          </div>
        </div>
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card card-body">
              {{ kpi_chart_html | safe }}
            </div>
          </div>
        </div>
      </div>

    </div>

{% endblock %}

{% block extra_js %}
    {{ block.super }}
    {{ media.js }}
{% endblock %}