{% extends 'private_template.html' %}
{% load static %}

{% block titulo %}Makarios | Vídeos {% endblock %}

{% block header %}
    {% include 'private_header.html' %}
{% endblock %}

{% block content %}
<style>
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    .main-tabs { background-color: #F8F3EE !important; }
</style>

<section class="page-header">
    <div class="container">
        <h2>Lista de Vídeos</h2>
    </div>
</section>

<div class="main-tabs">
    <section class="main container sbr clearfix">
        <a class="btn btn-secondary col-md-2 offset-md-10 mb-2" href="{% url 'adicionar_post_instagram' %}">Novo Post</a>

        <div class="content-tabs tabs-style-1 mb-1">
            <ul class="tabs-nav clearfix">
                <li><a href="#tab-geral" class="active">Lista de Vídeos</a></li>
            </ul>

            <div class="tabs-container">
                <div class="tab-content active" id="tab-geral">
                    {% include "youtube/tabela.html" with itens=videos %}
                </div>
            </div>
        </div>
    </section>
</div>

<script src="{% static 'js/jquery-1.7.2.min.js' %}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('.tabs-nav a');
    const contents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
      tab.addEventListener('click', function (e) {
        e.preventDefault();
        tabs.forEach(t => t.classList.remove('active'));
        this.classList.add('active');
        contents.forEach(c => c.classList.remove('active'));
        const id = this.getAttribute('href');
        const pane = document.querySelector(id);
        if (pane) pane.classList.add('active');
      });
    });

    // Abre a primeira aba na carga inicial
    if (tabs.length > 0) tabs[0].click();
  });
</script>
{% endblock %}