{% load staticfiles %}
{% load i18n %}

<!--
Jinja2 partial to render a key-value dictionary

include as

{ % include 'sharedapp/partials/full_width_key_value_pairs.html' with usecase=usecase spec=spec widget=widget % } -->
<div class="block-widget-box width-all mb-3" id="{{widget.id}}">
  <div class="block-filter-container d-flex flex-wrap align-items-center">
    <div class="crc-head-inside d-flex align-items-center">
      <div class="crc-head-icon"  data-bs-toggle="collapse" data-bs-target="#collapseresults" aria-expanded="true">
        <img class="expand-open" src="{% static 'gui2/appstore2/images/new-caret-icon-1.svg' %}" alt="" />
        <img class="expand-add" src="{% static 'gui2/appstore2/images/expand-add.svg' %}" alt="" />
      </div>
      <div class="accor-right">
        <div class="block-filter-left">
          <ul class="cp-text-list d-flex align-items-center">
            <li><b>{% translate widget.name|safe %}</b></li>
          </ul>
          <p>{% translate widget.description %}</p>
        </div>
      </div>
    </div>
    <div class="block-filter-option ms-auto d-flex align-items-center justify-content-end align-block-filter-option">
        {% for k,values in widget.header_components.items %}
        {% for v in  values %}
        {% include 'sharedapp/components/'|add:v.template|add:'.html' with content=v widget=widget %}
        {% endfor %}
        {% endfor %}
    </div>
  </div>
  <div id="collapseresults" class="crc-body accordion-collapse collapse show">
    <div class="bw-body p-0">
      <ul class="v-line-text-list d-flex flex-wrap">
	{% for k, v in widget.details.items %}
        <li>
          <div class="v-line-box">
            <h4>{% translate k %}</h4>
            <p>{{v|safe}}</p>
          </div>
        </li>
	{% endfor %}
      </ul>
    </div>
  </div>
</div>

<div class="modal fade sd-modal" style="z-index: 9999;" id="confirm_dialog">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="sd-content-box">
        <div class="sd-modal-header" style="height: 100px !important;">
          <div class="d-flex flex-wrap">
            <div class="sd-modal-header-left-sm d-flex flex-wrap">
              <p>Do you really want to delete <span class="delete-text" id="targetid"></span>?</p>
              <div class="hide-text" id="targetname"></div>
	      <div class="hide-text" id="redirectname"></div>
            </div>
            <div class="sd-modal-header-right ms-auto text-end">
              <div class="sd-mhr-icon-group d-flex align-items-center justify-content-end">
                <div class="sd-mhr-icon" data-bs-dismiss="modal">
                  <img src="{% static 'gui2/appstore2/images/modal-close-icon.svg' %}" alt="" /></div>
              </div>
            </div>
          </div>
        </div>
        <div class="padding-24"></div>
        <div class="sd-modal-body" data-simplebar>
          <button type="button" class="btn btn-default" id="modal-btn-no">No</button>
          <button type="button" class="btn btn-primary" id="modal-btn-yes">Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

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

      $(".deletebtn").click(function (e) {

          $("#targetname").text($(this).attr('data-url'));
	  $("#redirectname").text($(this).attr('redirect-url'));
          $('#confirm_dialog').modal('show');
          e.preventDefault();
          e.stopPropagation();
      });

      $('#modal-btn-no').click(function(e){
          $('.sd-mhr-icon').click();
      });

      $('#modal-btn-yes').click(function(e){
	  var targeturl = $('#targetname').html();
	  var redirecturl = $('#redirectname').html();
	  e.preventDefault();
	  var cookie = '{{csrf_token}}';
	  $.ajax({
              type: 'POST',
              headers: {'X-CSRFToken': cookie},
              data: JSON.stringify({'target' : targetid, 'path': targetname}),
              url: targeturl,
              success: function (response) {
		  toastr.success("Deleted!");
              },
              error: function (XMLHttpRequest, textStatus, errorThrown) {
		  console.log("Error: " + errorThrown);
              },
	  }).done(function (rawData) {
              $('.sd-mhr-icon').click();
	      location.href = redirecturl;
	  });
      });

  });

</script>
