{% extends "ereuse_devicehub/base_site.html" %}
{% block main %}

<div class="pagetitle">
  <h1>Inventory</h1>
  <nav>
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="{{ url_for('inventory.devicelist')}}">Inventory</a></li>
      <li class="breadcrumb-item active">{{ page_title }}</li>
    </ol>
  </nav>
</div><!-- End Page Title -->

<section class="section profile">
  <div class="row">

    <div class="col-xl-12">

      <div class="card">
        <div class="card-body pt-3">
          <h3>{{ snapshot_sid }} | {{ snapshot_uuid }}</h3>
          <!-- Bordered Tabs -->
          {% if form.show() %}
          <ul class="nav nav-tabs nav-tabs-bordered">

            <li class="nav-item">
              <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#log">Log</button>
            </li>

            <li class="nav-item">
              <button class="nav-link" data-bs-toggle="tab" data-bs-target="#change-type">Change type updated</button>
            </li>

          </ul>
          {% endif %}
          <div class="tab-content pt-2">

            {% if form.show() %}
            <div class="tab-pane fade" id="change-type">
              <h5 class="card-title">Change Snapshot Type Upload</h5>
              <div class="list-group col-6">
                <div class="list-group-item">
                  <form method="post" class="row g-3 needs-validation">
                    {{ form.csrf_token }}
                    {% for f in form %}
                      {% if f != form.csrf_token %}
                      <p class="mb-1">
                        {{ f }}
                      </p>
                      {% endif %}
                    {% endfor %}
                      <p class="mb-1">
                        <!-- <button class="btn btn-primary" type="submit">Save</button> -->
                        <a href="javascript:change_updated()" type="button" class="btn btn-primary">Save</a>
                        <span class="d-none" id="activeChangeUpdatedModal" data-bs-toggle="modal" data-bs-target="#btnChangeStatus"></span>
                      </p>
                  </form>
                </div>
              </div>
            </div>
            {% endif %}
            <div class="tab-pane fade show active" id="log">
              <h5 class="card-title">Traceability log Details</h5>
              <div class="list-group col-6">
                {% for log in snapshots_log %}
                <div class="list-group-item">
                  <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{ log.get_status() }}</h5>
                    <small class="text-muted">{{ log.created.strftime('%H:%M %d-%m-%Y') }}</small>
                  </div>
                  <p class="mb-1">
                    Device:
                    {{ log.get_device() }}<br />
                    Version: {{ log.version }}<br />
                  </p>
                  <p>
                    <small class="text-muted">
                      {{ log.description }}
                    </small>
                  </p>
                </div>
                {% endfor %}
              </div>
            </div>

        </div>
      </div>
    </div>
  </div>
</section>
<div class="modal fade" id="btnChangeStatus" tabindex="-1" style="display: none;" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title">Change type updated</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <div id="new_device" class="d-none">
          Are you sure that you want to Change to <strong>New device</strong>?
          <p class="text-danger">
            This action cannot be undone.
          </p>
        </div>
        <div id="update" class="d-none">
          Are you sure that you want to Change to <strong>Update</strong>?
          <p class="text-danger">
            This action cannot be undone.
          </p>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary-outline" data-bs-dismiss="modal">Cancel</button>
        <a href="javascript:void()" type="button" class="btn btn-danger">
          Confirm Save!
        </a>
      </div>

    </div>
  </div>
</div>
<script>
function change_updated() {
  const stype = $("#snapshot_type").val();
  $("#update").attr('class', 'd-none');
  $("#new_device").attr('class', 'd-none');
  $("#"+stype).attr('class', 'd-block');
  $("#activeChangeUpdatedModal").click();
}
</script>

{% endblock main %}