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

    <link rel="stylesheet" href="/css/insert.css" />

    <title>WaTchV</title>
  </head>
  <body>
    <header>
      <img id="logo-img" src="./img/logo-watchv.png" />
      <img id="svg-img" src="./img/television-tv-svgrepo-com.svg" />
    </header>
    <main>
      <section id="insert">
        <h2>Cadastre seus filmes aqui:</h2>

        <form action="/movieinsert" method="POST">
            <div id="form">
                  

                <div class="info-input">
                    <div class="div-field">
                        <label for="title">Nome: </label>
                            <input
                                type="text"
                                name="title"
                                id="title"
                                placeholder="Nome do filme"
                                required
                            />
                    </div>

                    <div class="div-field">
                        <label for="direction">Direção: </label>
                            <input
                                type="text"
                                name="direction"
                                id="direction"
                                placeholder="Direção"
                                required
                            />
                    </div>

                    <div class="div-field">
                        <label for="release">Lançamento: </label>
                            <input
                              type="text"
                              name="release"
                              id="release"
                              placeholder="01/01/2001"
                              required
                            />
                    </div>  

                    <div class="div-field">
                        <label for="genre">Gênero: </label>
                        <select class='select' name='genre' required >
                            <option value=''>gênero</option>
                            <option value='action'>Ação</option>
                            <option value='comedy'>Comédia</option>
                            <option value='drama'>Drama</option>
                            <option value='thriller'>Suspense</option>
                        </select>
                    </div>              

                    <div class="div-field">
                        <label for="rating">Nota: </label>
                            <input
                              type="number"
                              name="rating"
                              id="rating"
                              placeholder="Nota de 0 a 5"
                              required
                              step="1"
                              min="0"
                              max="5"
                            />
                    </div>

                    <div class="div-field">
                        <label for="status">Status: </label>
                        <select class='select' name='status' required >
                            <option value=''>status</option>
                            <option value='watched'>Assistida</option>
                            <option value='notwatched'>Não Assistida</option>
                            <option value='wishlist'>Lista de Desejos</option>
                        </select>
                    </div>  

                    <div class="div-field">
                        <label for="cover">Capa: </label>
                            <input
                              type="text"
                              name="cover"
                              id="cover"
                              placeholder="Link da imagem"
                              required
                            />
                    </div>  

                </div>

                <div class="info-input" id="info-input-img">
                    <img id="info-img" src="./img/movie.svg" />
                </div>
                
            </div>

        </form>

        

      <div id="button">
        <button id="register-button" type="submit">Cadastrar</button>
      </div>

      </section>
    </main>
    
    <footer>
      <p>
        Esta é uma aplicação de caráter estudantil. Não detemos direitos
        autorais das imagens, tampouco é utilizada para fins comerciais.
      </p>
    </footer>
    <!-- <script src="./script.js"></script> -->

    
  </body>
</html>
