<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mis letras de canciones</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
</head>
<body>
    <div class="container">
        <h1>Mis letras de canciones</h1>
        <nav>
            <a href="{{ url_for('paginas.index') }}">Inicio</a>
            <a href="{{ url_for('paginas.add_song') }}">Añadir canción</a>
            <a href="{{ url_for('paginas.add_album') }}">Añadir álbum</a>
	    <!--
            <form action="{{ url_for('paginas.search') }}" method="get" style="display:inline;">
                <input type="text" name="query" placeholder="Search songs...">
                <button type="submit">Search</button>
            </form>
	    -->
        </nav>
        <hr>
        {% block content %}{% endblock %}
    </div>
 
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- DataTables JS -->
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

    <script>
        $(document).ready(function() {
            $('#songTable').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
                }
            });
            $('#albumTable').DataTable({
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Spanish.json"
                }
            });
        });
        
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

        // Default open tab
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementsByClassName('tablinks')[0].click();
        });
    </script>
</body>
</html>
