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

{% block css %}
  
{% endblock css %}

{% block body %}

<style>


  .pst-cont{

    width: 50% !important; 
    
    margin-left: auto;
    margin-right: auto;

    & img {
      max-width: 100%; /* La imagen no superará el ancho del contenedor */
      height: auto;    /* Mantiene la proporción */
      display: block;  /* Elimina espacios no deseados debajo de la imagen */
    }

    & p {
      text-align: justify !important;
      text-justify: inter-word !important;
    }

    & .note-float-left, .note-float-right{
      margin-top: 1em;
      margin-bottom: 1em;    
    }

    & .note-float-left {
      margin-right: 1em;  
    }

    & .note-float-right{
      margin-left: 1em;
    }

  }
</style>


<div class="pst-cont">
  <h1>{{data[2]}}</h1>
  <span>
    <i class="bi bi-calendar-week"></i> {{data[0]}}
    {% if data[1] is not none %} | <i class="bi bi-arrow-repeat"></i> {{data[1]}}{% endif %}
    | <i class="bi bi-clock-fill"></i> {{time_read}}
  </span>
  <div>
    <a type="button" class="btn btn-info" href="{{ url_for('my_posts') }}"><i class="bi bi-arrow-left"></i> Mis Publicaciones.</a>
    <a type="button" class="btn btn-secondary" href="{{ url_for('edit_post', id_post= post_id ) }}"><i class="bi bi-vector-pen"></i> Editar.</a>
  </div>
  
  {{data[3] | safe}}
</div>


{% endblock body %}

{% block js %}
<!-- {# flecha ir hasta arriba #} -->
{% include 'z_comps/arrow_to_up.html' %}


<script>
  let cont = document.querySelector('div.pst-cont');
  // let lst_img = cont.querySelectorAll('p img[style="width: 2515px;]');
  let lst_img = cont.querySelectorAll('p img[style*="width: 2515px;"]');
  lst_img.forEach(ele => {
    console.log(ele);
  })
</script>



{% endblock js %}