{% extends 'base.html' %}
{% load static mep_tags %}
{% load render_bundle from webpack_loader %}

{% block page-subtitle %}Graphs · Library Members · {% endblock %}

{% block js %}
<script src="{% static 'js/d3.v5.min.js' %}"></script>
{% endblock %}

{% block header %}
{% include 'snippets/header.html' with title='Membership Graphs' style="detail" %}
{% endblock %}

{% block main-style %}tabbed white{% endblock %}

{% block content %}
<article class="main">
  <section>
  <h2>Members</h2>
    <div class="membership-graph" data-series="subscriptions"> </div>

    <table width="100%" style="text-align: center">
      <caption>Totals by month: members with subscriptions</caption>
      <tr style="font-weight:bold">
        <th>Year</th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
        <th>Apr</th>
        <th>May</th>
        <th>Jun</th>
        <th>Jul</th>
        <th>Aug</th>
        <th>Sep</th>
        <th>Oct</th>
        <th>Nov</th>
        <th>Dec</th>
        <th>Min</th>
        <th>Max</th>
        <th>Avg</th>
      </tr>
      {% for year in tabular_data.years %}
        <tr>
          <th>{{ year }}</th>
          {% with values=tabular_data.logbooks|dict_item:year %}
          {% for count in values %}
          <td {% if count == tabular_data.logbooks_month_max %} style="font-weight:bold"{% endif %}>{{ count }}</td>
          {% endfor %}
          <td>{{ values|min|floatformat:2 }}</td>
          <td>{{ values|max|floatformat:2 }}</td>
          <td>{{ values|avg|floatformat:2 }}</td>
          {% endwith %}
        </tr>
      {% endfor %}
    </table>

    <p></p>
</section>

<section>
  <h2>Members with book activity</h2>
    <div class="membership-graph" data-series="borrows"> </div>

    <table width="100%" style="text-align: center">
      <caption>Totals by month: members with book activity</caption>
      <tr style="font-weight:bold">
        <th>Year</th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
        <th>Apr</th>
        <th>May</th>
        <th>Jun</th>
        <th>Jul</th>
        <th>Aug</th>
        <th>Sep</th>
        <th>Oct</th>
        <th>Nov</th>
        <th>Dec</th>
        <th>Min</th>
        <th>Max</th>
        <th>Avg</th>
      </tr>
      {% for year in tabular_data.years %}
        <tr>
          <th>{{ year }}</th>
          {% with values=tabular_data.cards|dict_item:year %}
          {% for count in values %}
          <td {% if count == tabular_data.cards_month_max %} style="font-weight:bold"{% endif %}>{{ count }}</td>
          {% endfor %}
          <td>{{ values|min|floatformat:2 }}</td>
          <td>{{ values|max|floatformat:2 }}</td>
          <td>{{ values|avg|floatformat:2 }}</td>
          {% endwith %}
        </tr>
      {% endfor %}
    </table>
    <p></p>
  </section>

  <h2>Subscriptions and book activity together</h2>
    <div class="membership-graph" data-series="subscriptions borrows"> </div>
  <h2>Subscriptions, book activity, and total number of members</h2>
    <div class="membership-graph" data-series="subscriptions borrows members"> </div>


  <table width="100%" style="text-align: center">
      <caption>Percentage by month: members with book activity against total known members</caption>
      <tr style="font-weight:bold">
        <th>Year</th>
        <th>Jan</th>
        <th>Feb</th>
        <th>Mar</th>
        <th>Apr</th>
        <th>May</th>
        <th>Jun</th>
        <th>Jul</th>
        <th>Aug</th>
        <th>Sep</th>
        <th>Oct</th>
        <th>Nov</th>
        <th>Dec</th>
        <th>Min</th>
        <th>Max</th>
        <th>Avg</th>
      </tr>
      {% for year in tabular_data.years %}
        <tr>
          <th>{{ year }}</th>
          {% with values=tabular_data.card_percents|dict_item:year %}
          {% for count in values %}
          <td>{{ count|floatformat:2 }}</td>
          {% endfor %}
          <td>{{ values|min|floatformat:2 }}</td>
          <td>{{ values|max|floatformat:2 }}</td>
          <td>{{ values|avg|floatformat:2 }}</td>
          {% endwith %}
        </tr>
      {% endfor %}
    </table>
    <p></p>


</article>

{{ data|json_script:"membership-data"}}
{# load the membership graph bundle, which will render based on data-series #}
{% render_bundle 'membershipGraphs' %}

</section>
{% endblock %}