{% extends 'h_tmp_usr/z_tmp.html' %}

{% block css %}

<!-- {# i jconfirm #} -->
<link rel="stylesheet" href="https://htmlguyllc.github.io/jConfirm/jConfirm.min.css">
<!-- {# f jconfirm #} -->
  
{% endblock css %}

{% block body %}


<style>
  .fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
</style>

<style>
  @media (max-width: 576px) {
  #card-container {
    justify-content: center;
  }
}

</style>


<style>
  /* Smartphones (hasta 767px) */
@media (max-width: 767px) {
  /* main{ background-color: black;  } */
    main {
    min-height: 80dvh;
  }
}

/* Tablets (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* main{ background-color: pink;  } */
    main {
    min-height: 80dvh;
  }
}

/* Laptops (1024px - 1439px) monitores resulición baja */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* main{ background-color: purple;  } */
    main {
    min-height: 80dvh;
  }
}

/* PCs de escritorio (1440px - 1919px) macbook */
@media (min-width: 1440px) and (max-width: 1919px) {
  /* main{ background-color: greenyellow;  } */
    main {
    min-height: 80dvh;
  }
}

/* Pantallas Ultrawide (1920px en adelante) */
@media (min-width: 1920px) {
  /* main{ background-color: red;  } */
  main {
    min-height: 80dvh;
  }
}


</style>

















  
<div class="container">
  
  <!-- {# i pagination #} -->
  {% if total_pages > 1 %}
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center mt-4">

      <li class="page-item {% if current_page == 1 %}disabled{% endif %}">
        <a class="page-link" href="?page={{ current_page - 1 }}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>

      {% for p in range(1, total_pages + 1) %}
      <li class="page-item {% if p == current_page %}active{% endif %}">
        <a class="page-link" href="?page={{ p }}">{{ p }}</a>
      </li>
      {% endfor %}

      <li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
        <a class="page-link" href="?page={{ current_page + 1 }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>

    </ul>
  </nav>
  {% endif %}
  <!-- {# f pagination #} -->
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="card-container" data-aos="zoom-out-left" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out">

    {% for ele in data %}

    <div class="col card-wrapper" data-id="{{ele[0]}}">
      <div class="card h-100">

        <img src="{{ (ele[5] if ele[5] is not none else url_for('static', filename='y_img/other/no_img.png'))|safe }}"
          class="card-img-top" alt="card image">

        <div class="card-body d-flex flex-column">
          <div class="mb-3">
            <h5 class="card-title">{{ ele[3] }}</h5>
            <p class="card-text">{{ ele[4] }}...</p>
            <small class="text-muted">
              <i class="bi bi-calendar-week"></i> {{ ele[1] }}<br>
              {% if ele[2] is not none %}
              <i class="bi bi-arrow-repeat"></i> {{ ele[2] }}<br>
              {% endif %}
              <i class="bi bi-clock"></i> {{ ele[6] }} min.
            </small>
          </div>
          <div class="mt-auto">
            <a class="btn btn-primary btn-sm" href="{{ url_for('post', post_id=ele[0]) }}"><i
                class="bi bi-eye-fill"></i></a>
            <a class="btn btn-secondary btn-sm" href="{{ url_for('edit_post', id_post=ele[0]) }}"><i
                class="bi bi-vector-pen"></i></a>
            <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="{{ele[0]}}">
              <i class="bi bi-trash3"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  <!-- {# i pagination #} -->
  {% if total_pages > 1 %}
  <nav aria-label="Page navigation">
    <ul class="pagination justify-content-center mt-4">

      <li class="page-item {% if current_page == 1 %}disabled{% endif %}">
        <a class="page-link" href="?page={{ current_page - 1 }}" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>

      {% for p in range(1, total_pages + 1) %}
      <li class="page-item {% if p == current_page %}active{% endif %}">
        <a class="page-link" href="?page={{ p }}">{{ p }}</a>
      </li>
      {% endfor %}

      <li class="page-item {% if current_page == total_pages %}disabled{% endif %}">
        <a class="page-link" href="?page={{ current_page + 1 }}" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>

    </ul>
  </nav>
  {% endif %}
  <!-- {# f pagination #} -->

</div>

  

{% endblock body %}

{% block js %}


<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}



<!-- jQuery y jConfirm -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://htmlguyllc.github.io/jConfirm/jConfirm.min.js"></script>

<script>
    function delete_post(e) {
      let btn = $(this); // `this` es el botón que lanzó el jConfirm
      let postId = btn.data('id'); // lee el data-id
      let data = { 'id': postId };

      fetch('/user/del-post', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data),
        credentials: 'include'
      })
        .then(response => {
          if (!response.ok) {
            throw new Error('Error en la respuesta del servidor');
          }
          return response.json();
        })
        .then(data => {
          if (data.ok) {
            // Aquí puedes agregar código para eliminar el post del DOM
            
            console.log(data.message);
            document.querySelector(`div [data-id='${data.id}']`).remove();
            // Por ejemplo, si el post está en un elemento con clase 'post':
            btn.closest('.post').remove();
          } else {
            console.error('Error:', data.message);
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });
    }


  // https://htmlguyllc.github.io/jConfirm/
     $(function(){
        $('.delete-btn').jConfirm({
            //false|array: if provided, this will override the default confirm/deny buttons (see below for an example)
            btns: false,
            //string: question displayed to the user
            question: '¿Deseas continuar con la eliminación?',
            //string: confirm button text
            confirm_text: 'Sí',
            //string: deny button text
            deny_text: 'No',
            //boolean: if true, when the confirm button is clicked the user will be redirected to the button's href location
            // follow_href: true,
            //boolean: if true and follow_href is true, the href will be opened in a new window
            open_new_tab: false,
            //boolean: if true, the tooltip will be hidden if you click outside of it
            hide_on_click: true,
            //string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
            position: 'auto',
            //boolean: if true, the deny button will be shown
            show_deny_btn: true,
            //string ('black', 'white', 'bootstrap-4', 'bootstrap-4-white')
            theme: 'bootstrap-4',
            //string ('tiny', 'small', 'medium', 'large')
            size: 'medium',
            //boolean: show the tooltip immediately on instantiation
            show_now: false,
            //string: class(es) to add to the tooltip
            'class': ''
        }).on('confirm', delete_post)
        .on('deny', function(e){
            var btn = $(this);
            //do something on deny
        }).on('jc-show', function(e, tooltip){
            // console.log("el tooltip es visible");
            //do something when tooltip is shown
            //tooltip dom element is passed as the second parameter
        }).on('jc-hide', function(e){
            //do something when tooltip is hidden
        });

    });
</script>


{% endblock js %}