{% extends "_base.html" %}
{% load i18n %}
{% load bootstrap %}
{% block content %}
<div style="padding-top: 1em;">
<h2>Edit Label</h2>
<form method="post" action="." >
    {% csrf_token %}
    {{ form|bootstrap }}
    <div  style="padding-top: 1em;">
      <a href="{{ form.instance.labelbase.get_absolute_url }}"
          type="button" class="btn btn-link">Back to Labelbase</a>
      <a href="#" data-bs-toggle="modal" data-bs-target="#deleteLabelModal"
          type="button" class="btn btn-danger ">Delete</a>
      <input type="submit"  class="btn btn-primary" value="Save">
    </div>
</form>

{% if request.user.is_superuser %}
  {% if form.instance.type == "tx" %}

    <style>
      .connector {
        margin-bottom: 0.5rem;
        height: 2.5rem;
        border-bottom: 2px solid #ccc;
        position: relative;
      }
      .float-left {
        float: left;
      }
      .float-right {
        float: right;
      }
    </style>

    <div class="row" style="padding-top: 3rem; padding-bottom: 3rem;">
      <h3 class="mb-4">Transaction Labeling</h3>
      <div class="col-md-4">
        <h4 class="mb-4">Inputs</h4>
        <div class="connector">
          <p><span class="float-left">Input #1</span> <button class="btn btn-outline-primary btn-sm float-right">New Label</button></p>
        </div>
        <div class="connector">
          <p><span class="float-left">Input #2</span> <button class="btn btn-outline-primary btn-sm float-right">New Label</button></p>
        </div>
      </div>
      <div class="col-md-4">
        <h4 class="mb-4">Transaction Details</h4>
        <!-- Transaction details content goes here -->
        <div class="connector">
          <p>
            <span class="float-left d-block d-md-none">{{ form.instance.ref|slice:"0:12" }}…{{  form.instance.ref|slice:"-"|slice:"-12:" }}</span>
            <span class="float-left d-none d-md-block d-lg-none">{{ form.instance.ref|slice:"0:4" }}…{{  form.instance.ref|slice:"-"|slice:"-4:" }}</span>
            <span class="float-left d-none d-lg-block">{{ form.instance.ref|slice:"0:12" }}…{{  form.instance.ref|slice:"-"|slice:"-6:" }}</span>

            <button class="btn btn-outline-primary btn-sm float-right">New Label</button></p>
        </div>
      </div>
      <div class="col-md-4">
        <h4 class="mb-4">Outputs</h4>
        <div class="connector">
          <p><span class="float-left">Output #1</span> <button class="btn btn-outline-primary btn-sm float-right">New Label</button></p>
        </div>
        <div class="connector">
          <p><span class="float-left">Output #2</span> <button class="btn btn-outline-primary btn-sm float-right">New Label</button></p>
        </div>
        <div class="connector">
          <p><span class="float-left">Output #3</span> <button class="btn btn-outline-primary btn-sm float-right">New Label</button></p>
        </div>
      </div>
    </div>
  {% endif %}
{% endif %}



<div class="modal" tabindex="-1" id="deleteLabelModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete label?</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 label and cannot be undone. Are you sure you want to proceed?
        </div>
      </div>
      <form method="post" action="{% url 'del_label' form.instance.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


{% endblock %}