{% extends 'template.html' %}

{% block css %}
<link rel="stylesheet" href="{{ url_for( 'static', filename='h_tmp_user/d_read_post/read_post.css' ) }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='e_blog/b_share_btn.css' ) }}">
{% endblock css %}

{% block navbar %}
{% include 'z_comps/navbar.html' %}
{% endblock navbar %}

{% block body %}


<div class="pst-cont" data-aos="fade-left" data-aos-delay="300" data-aos-duration="800">
  <h1>{{data[5]}}</h1> 
  <!-- {# volver, contenedor datos autor, creación publicación, fecha actualización, tiempo lectura, vistas, btn_share_all_rrss #} -->

  <div class="meta-bar">
    <a type="button" class="btn btn-light" href="{{ url_for('blog') }}">
      <i class="bi bi-arrow-left"></i> Volver
    </a>
  
    <div class="meta-info">
      <span class="meta-item"><i class="bi bi-person-circle"></i> {{data[0]}} {{data[1]}}</span> <br>
      <span class="meta-item"><i class="bi bi-pencil-square"></i> {{data[2]}}</span>
      {% if data[3] is not none %}
      <i class="bi bi-chevron-compact-right"></i> <span class="meta-item"><i class="bi bi-arrow-repeat"></i> {{data[3]}}</span> 
      {% endif %} <br>
      <span class="meta-item"><i class="bi bi-clock-history"></i> {{data[4]}} Min(s) lectura.</span> <br>
      <span class="meta-item"><i class="bi bi-eye"></i> <span id="viewed">{{data[7]}}</span></span>
    </div>
  
    <div class="share-container">
      <div class="share-toggle" aria-label="Compartir">
        <i class="bi bi-share-fill"></i>
      </div>
      <div class="share-buttons">
        <button class="share-btn mail" aria-label="Compartir por email"><i class="bi bi-envelope-at-fill"></i></button>
        <button class="share-btn in" aria-label="Compartir en LinkedIn"><i class="bi bi-linkedin"></i></button>
        <button class="share-btn fb" aria-label="Compartir en Facebook"><i class="bi bi-facebook"></i></button>
        <button class="share-btn tw" aria-label="Compartir en Twitter"><i class="bi bi-twitter-x"></i></button>
        <button class="share-btn wa" aria-label="Compartir en WhatsApp"><i class="bi bi-whatsapp"></i></button>
        <button class="share-btn copy" aria-label="Copiar enlace"><i class="bi bi-link-45deg"></i></button>
      </div>
    </div>
  </div>

  <div class="bd_post">
    {{data[6] | safe}}  
  </div>
</div>

{% endblock body %}
{% block js %}

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

{% include "z_comps/read_progress.html" %}
<script type="module" src="{{ url_for('static', filename='e_blog/copy_url.js') }}"></script>

<script src="{{ url_for('static', filename='e_blog/b_posts.js') }}"></script>
<!-- {# flecha ir hasta arriba #} -->
{% include 'z_comps/arrow_to_up.html' %}

{% endblock js %}