<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Administración de Platillos</title>
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="/operaciones.css">
    <link rel="stylesheet" href="/css/general/footer.css">
</head>
<body>
<header>
    <a href="/menu/<%= systemTag %>/section1">
        <img src="/img/logos/<%= systemTag %>.webp" alt="Logo de <%= systemTag %>">
    </a>

    <nav>
        <a href="/menu/<%= systemTag %>/add">Agregar platillo</a>  |
        <a href="/logout">Cerrar sesión</a>
    </nav>
</header>
<main>

    <div class="table-responsive">
        <table class="operaciones-table">
            <thead>
            <tr>
                <th>Categoria</th>
                <th>Nombre</th>
                <th>Precio</th>
                <th>Disponibilidad</th>
                <th class="acciones">Acciones</th>
            </tr>
            </thead>
            <tbody>

            <% platillos.forEach(platillo => { %>
                    <tr>
                        <td data-label="Categoria"><%=platillo.categoria%> </td>
                        <td data-label="Nombre"><%= platillo.nombre %></td>
                        <td data-label="Precio">$<%= platillo.precio %></td>
                        <td data-label="Disponibilidad" class="<%= platillo.disponibilidad ? 'disponible' : 'no-disponible' %>">
                            <%= platillo.disponibilidad ? 'Disponible' : 'No Disponible' %>
                        </td>

                        <td class="acciones" data-label="Acciones">
                            <a href="/menu/<%= systemTag %>/edit/<%= platillo.id %>" ><button>Editar</button></a>
                        </td>
                    </tr>


            <% }) %>

            </tbody>
        </table>
    </div>
</main>

<footer>
    <p>&copy; 2024 Jorge Melgarejo</p>
</footer>
</body>
</html>
