{% extends "_base.html" %}
{% load i18n %}
{% load labelbase_tags %}
{% load importer_tags %}
{% load sekizai_tags %}
{% load bootstrap %}

{% block content %}
{% if labelbase %}
  <div class="row">
    <div  class="col float-start">
      <h2 style="padding-top: 1em;">{% block title %}{{ labelbase.name }} {% endblock %}</h2>
      {% if labelbase.fingerprint %}<tt>{{ labelbase.fingerprint }} </tt>{% endif %}
      {% if labelbase.about %}
      <p>{{ labelbase.about}}</p>
      {% endif %}
    </div>

    <div class="col float-end" >
      <div class="btn-group float-end" role="group" aria-label="Button group with nested dropdown"  style="padding-top: 2em;">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addLabelModal">New 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="#" data-bs-toggle="modal" data-bs-target="#importBip329LabelsModal">BIP-0329 Labels</a></li>
            <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importBlueWalletCSVLabelsModal">BlueWallet CSV History</a></li>
            <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#importBitboxCSVLabelsModal">BitBox App CSV History</a></li>
          </ul>
        </div>
        <a href="{% url 'export_labels' labelbase.id %}" class="btn btn-primary">Export</a>

        {% comment %}
        <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>
        {% endcomment %}
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Labelbase
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#editLabelbaseModal">Edit</a></li>
            <!--li><a class="dropdown-item" href="#">Merge duplicates</a></li-->
            <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#connectApiKeyLabelbaseModal">API Connect</a></li>
            <li><a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#deleteLabelbaseModal">Delete Labelbase and Labels</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
{% else %}
  <p>There is no such labelbase.</p>
{% endif %}


{% 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">label</th>
          <th scope="col">ref</th>
          <th scope="col">origin</th>
          <th scope="col">spendable</th>
        </tr>
      </thead>

      <tbody>
        {% for label in label_list %}
        <tr>
          <td><a href="{% url 'edit_label' label.id %}">{{ label.id }}</a></td>
          <td>{{ label.get_type_display }}</td>
          <td>{{ label.label }}</td>
          {% if label.get_mempool_url %}
          <td><a href="{{ label.get_mempool_url }}">{{ label.ref }}</a></td>
          {% else %}
          <td>{{ label.ref }}</td>
          {% endif %}
          <td>{{ label.origin }}</td>
          {% if label.spendable is None %}
            <td></td>
          {% else %}
            <td>{{ label.spendable }}</td>
          {% endif %}
        </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="." method="post">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Create a new label</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{ labelform|bootstrap  }}
      </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">OK</button>
      </div>
      </form>
    </div>
  </div>
</div>


<!-- modal -->
<div class="modal" tabindex="-1" id="editLabelbaseModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form action="{% url 'edit_labelbase' labelbase.id %}" method="post">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Edit labelbase</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% labelbaseform_edit labelbase as form %}
        {{ form|bootstrap  }}
      </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">OK</button>
      </div>
      </form>
    </div>
  </div>
</div>


<!-- modal -->
<div class="modal" tabindex="-1" id="importBip329LabelsModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form action="{% url 'import_labels' %}" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Import BIP-0329 labels</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {% bip0329labeluploadform labelbase.id as form %}
        {{ form|bootstrap  }}
      </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">OK</button>
      </div>
      </form>
    </div>
  </div>
</div>


<div class="modal" tabindex="-1" id="importBlueWalletCSVLabelsModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form action="{% url 'import_labels' %}" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Import BlueWallet CSV History</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>
            Import BlueWallet's CSV History and create a 'tx' label for each record.
        </p>
        {% csvBlueWalletlabeluploadform labelbase.id as form %}
        {{ form|bootstrap  }}
      </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">OK</button>
      </div>
      </form>
    </div>
  </div>
</div>




<div class="modal" tabindex="-1" id="importBitboxCSVLabelsModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form action="{% url 'import_labels' %}" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Import BitBox CSV History</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>
            Import BitBox App's CSV History and create an 'addr' and a 'tx' label for each record.
        </p>
        {% csvBitBoxLabeluploadform labelbase.id as form %}
        {{ form|bootstrap  }}
      </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">OK</button>
      </div>
      </form>
    </div>
  </div>
</div>




<div class="modal" tabindex="-1" id="connectApiKeyLabelbaseModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">


      <div class="modal-header">
        <h5 class="modal-title">API Connect</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>
          API Key: <strong><tt>{{ api_token }}</tt></strong>
        <br>
          Labelbase ID: <strong><tt>{{labelbase.id }}</tt></strong>
        <br>
          Base Endpoint: <strong><tt>https://labelbase.space/api/</tt></strong>
        </p>
        <center>
          <div style="padding:1.5em;" id="qrcode"></div>

          <div class="alert alert-warning" role="alert">
            API keys work like passwords. Keep them secret!<br>
            Whoever knows the key can access your labelbases.<br>
          </div>
        </center>
        <p>
          Our API reference can be found <a href="/api-reference/">here</a>.
        </p>
      </div>


      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
      </div>


    </div>
  </div>
</div>


<div class="modal" tabindex="-1" id="deleteLabelbaseModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete labelbase and labels?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="alert alert-warning" role="alert">
         <strong>Warning:</strong>
         <br>
         <br>
         This action will permanently delete the labelbase and its labels and cannot be undone.
         <br><br>
         Are you sure you want to proceed?
        </div>
      </div>
      <form method="post" action="{% url 'del_labelbase' labelbase.pk %}">{% csrf_token %}
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">CANCEL</button>
        <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">DELETE</button>
      </div>
      </form>
    </div>
  </div>
</div>



  <script>
    {% addtoblock "js" %}
    $(document).ready(function () {
        $('#bip329labels').DataTable({
          order: [[0, 'desc']],
      });

      var qrcode = new QRCode("qrcode", {
          text: JSON.stringify({
              api_key: '{{ api_token }}',
              api_base: 'https://labelbase.space/api/',
              labelbase_id: {{labelbase.id }},
              name: '{{labelbase.name }}',
              fingerprint: '{{  labelbase.fingerprint }}',
            }),

          width: 200,
          height: 200,
          colorDark : "#000000",
          colorLight : "#ffffff",
          correctLevel : QRCode.CorrectLevel.H
      });

    });
    {% endaddtoblock %}
  </script>



{% endif %}
<!-- end modal -->

{% endblock %}