{% extends "_base.html" %}
{% load i18n %}
{% block content %}

<div style="padding-top: 1em;">
{% if labelbase %}
  <div class="row">
    <div class="col float-start">
      <h2>{% block title %}{{ labelbase.name  }} {% endblock %}</h2>
      {% if  labelbase.fingerprint %}<tt>{{ labelbase.fingerprint }} </tt>{% endif %}
      {% if about.about %}
      <p>{{ about.about}} </p>
      {% endif %}
    </div>
    
    <div class="col float-end" >
      <div class="btn-group float-end" role="group" aria-label="Button group with nested dropdown">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLabelModal">Add Label</button>

        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Import
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
          </ul>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Export
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
          </ul>
        </div>

      </div>


    </div>
  </div>
{% else %}
  <p>There is no such labelbase.</p>
{% endif %}
</div>



{% if labelbase %}

  <div class="table-responsive" style="padding-top:1em" >
    {% if label_list %}
    <table id="bip329labels" class="table table-striped table-sm">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">type</th>
          <th scope="col">ref</th>
          <th scope="col">label</th>
        </tr>
      </thead>


      <tbody>
        {% for label in label_list %}
        <tr>
          <td>{{ label.id }}</td>
          <td>{{ label.get_type_display }}</td>
          <td>{{ label.ref }}</td>
          <td>{{ label.label }}</td>

        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
      <p>There are no labels in this labelbase.</p>
    {% endif %}
</div>
{% endif %}

{% if labelbase %}
<!-- modal -->
<div class="modal" tabindex="-1" id="addLabelModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form action=".{#% url 'addlabeltolabelbase' labelbase.id %#}" method="post">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Add Label</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{ labelform.as_p }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Add Label</button>
      </div>
      </form>
    </div>
  </div>
</div>
{% endif %}
<!-- end modal -->

{% endblock %}