<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyGrid</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
        
    textarea{
    height: 10rem;
    resize: none;
    }

    </style>

</head>
<body>
    <div class="container">
        <div class="alert alert-success" role="alert">
            <a href="/admin"  class="alert-link">Voltar</a>
        </div>
    <h1  class="display-4">My Grid - Gerenciamento de Conteúdo</h1>
    <h3 class="display-6">My Grid - Adicionar</h3>
    <form action="" method="post" >
        <label for="titulo" class="form-label">Título:</label>
        <input type="text" name="titulo" id="" required class="form-control"><br>
        <label for="texto"class="form-label">Texto:</label>
        <textarea name="texto" id="" cols="30" rows="10"required class="form-control"></textarea><br>
        <input type="submit" value="Gravar" class="btn btn-warning">
    </form>
    <h3 class="display-6">My Grid - Listar</h3>
    <table class="table table-striped table-hover">
        <tr>
            <th>Título</th>
            <th>Texto</th>
            <th class="colspan">Ações</th>
            <th class="colspan">Deletar</th>
            <th>Data:</th>
        </tr>
        <!-- inserir um loop para exibição da JSON mygrid-->
        <% for (var n=0; n<dados.length; n++){%>
        <tr>
            <td><%=dados[n].titulo%></td>
            <td><%=dados[n].texto%></td>
            <td><a href="/vizualizar_mygrid?id=<%=dados[n]._id%>&action=update" class="btn btn-outline-info btn-sm">Alterar</a></td>
            <td><a href="/vizualizar_mygrid?id=<%=dados[n]._id%>&action=delete" class="btn btn-outline-warning btn-sm">Excluir</a></td>
            <td><%=dados[n].enviado%></td>

        </tr>
        <%}%>
        <!-- fim do loop-->
    </table>
</div>
</body>
</html>