{% extends "no_jumbo_base.html" %}
{% load mathfilters %}
{% block title %}#{{ batch.brewfather_num }} {{ batch.brewfather_name }}{% endblock %}

{% block style %}
.table td.fit,
.table th.fit {
   white-space: nowrap;
   width: 1%;
}
{% endblock %}



{% block content %}
<!-- Information Header -->
<div class="container">
<h1>{{ batch.brewfather_name }}</h1>
</div> <!-- /container -->
<!-- End Information Header -->

<!-- Main Data Container -->
<div class="container mt-4 mb-4">
  <div class="row">

    <!-- Tabbed Pages -->
    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-fill" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" data-bs-toggle="tab" href="#planning">Planning</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#brewing">Brewing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#fermenting">Fermenting</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-bs-toggle="tab" href="#complete">Complete</a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div id="planning" class="container tab-pane active"><br>
        {% include "beer/planning.html" %}
      </div>
      <div id="brewing" class="container tab-pane fade"><br>

      </div>
      <div id="fermenting" class="container tab-pane fade"><br>

      </div>
      <div id="complete" class="container tab-pane fade"><br>

      </div>
    </div>

    <!-- End Tabbed Pages -->

  </div>
</div>
<!-- End Main Data Container -->

{% endblock %}