<!DOCTYPE html>
<html lang="pt-br">

<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">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>


  <title>Episodios</title>


</head>

<body>
  <header class="header">
    <a href="/">Home|</a>
    <nav>
      <ul class="menu">
        <li><a href="animes">Animes|</a></li>
        <li><a href="criar">Cadastro|</a></li>
        <li><a href="personagens">Personagens|</a></li>

      </ul>
    </nav>
  </header>

    <div class="nome text-center">
      <h1>EPISODIOS</h1>
    </div>

    <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand">DEMON SLAYER</a>

    <ul class="nav nav-tabs">

      <li class="nav-item dropdown">
        <a id="ac" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
          aria-expanded="true">Opçoes</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#1 Temporada">1° Temporada</a></li>
          <li><a class="dropdown-item" href="#acao">Cadastrar Episodios</a></li>
          <li>
            <hr class="dropdown-divider">
          </li>

        </ul>
      </li>

    </ul>


    <form class="form-inline">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </nav>

  <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="img/dem.jpeg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="img/de.jpeg" class="d-block w-100" alt="...">
      </div>
      <div class="carousel-item">
        <img src="img/d.jpeg" class="d-block w-100" alt="...">
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>

  <div class="container bg-info" id="1 Temporada">
    <h2>1°TEMPORADA</h2>
  </div>

  <section class="flex">

    <div class="container">
      <div class="row">
      <% episodios.forEach(item=> { %>
      <div>

        <img src="<%=item.ep_ima_url%>" class="img-fluid" width="216px" height="310px"><br>
          <h2 class="title""><%= item.ep_name %></h2><br>
          <p>Episodio: <%= item.ep_numero %> </p>  
          <p><%= item.ep_descricao %></p><br>
          <a href=" /epdel/<%=item.id%>"><button>Excluir</button></a><br>

      </div>
      <% }) %><br>

    </div>
    
  </section>

      </div>

     
      <br><br>

      <div class="container bg-info" id="acao">
        <h2>CADASTRAR EPISODIOS</h2>
      </div>

      <div class="container">
        <div class="row">


        </div>

        <section id="inscrever">


          <form method="POST">
            <div>
              <label for="numero">Numero: </label>
              <input type="number" name="ep_numero" id="ep_numero" placeholder="Qual o numero do episodio" required>
            </div>
            <div>
              <label for="nome">Nome: </label>
              <input type="nome" name="ep_name" id="nome" placeholder="Digite o nome do episodio" required>
            </div>
            <div>
              <label for="imagem">Imagem: </label>
              <input type="imagem" name="ep_ima_url" id="imagem" placeholder="Coloque a url da imagem" required>
            </div>
            <div>
              <label for="descricao">Descrição: </label>
              <input type="text" name="ep_descricao" id="descricao" placeholder="Coloque a descricao" required>
            </div>

            <button id= "cadastro" type="submit">Cadastrar</button>

          </form>
        </section>



        <script src="/js/index.js"></script>
</body>

</html>