{% extends 'layout.html' %}

{% load static %}

{% load crispy_forms_tags %}


{% block content %}
<!-- UPDATE Modal --------------------------------------------------------------------------------------------- -->
<div class="modal fade" id="closeModal" tabindex="-1" aria-labelledby="closeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="closeModalLabel">CLOSE DISPUTE FORM</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="p-1">

                <form method="post" action="" id="update_form">
                    {% csrf_token %}
                    
                    {{form|crispy}}
                    <button type="submit" class="btn btn-warning mt-5 form-control shadowed">Close Dispute</button>
                </form>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="window.location.reload()">Close</button>
        </div>
      </div>
    </div>
  </div>
<!--UPDATE Modal Ends --------------------------------------------------------------------------------------------------------------------->


<div class="mx-1 my-2" style="border: 0.2px solid rgba(0, 0, 0, 0.1);">
  <h3 class="p-2" style="background-color:#212529;color:white;">DISPUTE DETAILS</h3>
  <div class="px-3 pb-3">
      <div class="mb-3">
        <div class="row">
          <div class="col-sm-12 col-lg-9">
            <!-- DETAILS -->
            <p class="mb-0">DISPUTE : <strong>{{ data.dispute }}</strong></p>
            <p class="mb-0">STATUS : <strong>{{ data.status }}</strong></p>
            <p class="mb-0">DESCRIPTION : <strong>{{ section }}</strong></p>
            <p class="mb-0">PRODUCT : <strong>{{ product }}</strong></p>
            <p class="mb-0">Created by <strong>{{ data.created_by }}</strong> at <strong>{{ data.datetime_created }}</strong></p>
            {% if data.closed_by %}
                <p class="mb-0">CLOSE COMMENT : <strong>{{ data.close_comment }}</strong></p>
                <p class="mb-0">Closed by <strong>{{ data.closed_by }}</strong> at <strong>{{ data.datetime_closed }}</strong></p>
            {% else %}
                <button class="btn btn-primary shadowed mt-3" data-bs-toggle="modal" data-bs-target="#closeModal">CLOSE...</button>
            {% endif %}
                <a href="{{ link }}" class="btn btn-dark shadowed mt-3">BACK..</a>
            <!-- DETAILS -->
          </div>
          <div class="col-sm-12 col-lg-3"></div>
        </div>
      </div>
  </div>
</div>

 <br><br>

 <script>
    $(document).ready(function(){})
</script>


<script>
    if ( window.history.replaceState ) {
        window.history.replaceState( null, null, window.location.href );
    }
</script>


{% endblock %}