<section class="modal-overlay" id="overlay">
    <div class="modal scroll" id="modal">
        <div class="modal-header">
            <h2 class="titulo">Atualizar <%= monstroPut.nome.trimRight() %></h2>
            <a href="/" id="close-modal-put"><i class="bi bi-x"></i></a>
        </div>
        <div class="modal-body">
            <div id="teste_modal">
            <section class="cadastro">
                <section id="formulario">
                    <form method="post" action="/update/<%= monstroPut.id %>">
                      <fieldset id="fieldPrimario">

                        <legend>Detalhes do Monstro!</legend>
                        <hr>

                        <fieldset>
                          <label for="nome">Nome:</label>
                          <input type="text" name="nome" required value="<%= monstroPut.nome.trimRight() %>"/>
                        </fieldset>
                        <hr>
                        
                        <fieldset>
                          <label for="idade">Idade:</label>
                          <input type="text" name="idade" required value="<%= monstroPut.idade.trimRight() %>"/>
                        </fieldset>
                        
                        <hr>

                        <fieldset>
                          <label for="desastre">Nível de desastre:</label>
                          <select name="desastre" required selected>
                            <option value="">Selecionar</option>
                            <option value="1" <%= monstroPut.desastre == '1' ? 'selected' : ''%>>Fraco</option>
                            <option value="2" <%= monstroPut.desastre == '2' ? 'selected' : ''%>>Mediano</option>
                            <option value="3" <%= monstroPut.desastre == '3' ? 'selected' : ''%>>Forte</option>
                            <option value="4" <%= monstroPut.desastre == '4' ? 'selected' : ''%>>Muito Forte</option>
                            <option value="5" <%= monstroPut.desastre == '5' ? 'selected' : ''%>>Ameaça</option>
                            <option value="6" <%= monstroPut.desastre == '6' ? 'selected' : ''%>>Cataclisma</option>
                          </select>
                        </fieldset>
                        <hr>
                        <fieldset>
                          <label for="altura">Altura:</label>
                          <input type="text" name="altura" required value="<%= monstroPut.altura.trimRight() %>"/>
                        </fieldset>
                        <hr>
                        <fieldset>
                          <label for="peso">Peso:</label>
                          <input type="text" name="peso" required value="<%= monstroPut.peso.trimRight() %>"/>
                        </fieldset>
                        <hr>
                        <fieldset>
                          <label for="agressivo">O monstro é agressivo?</label>
                            <select name="agressivo" required>
                                <option value="">Selecionar</option>
                                <option value="1" <%= monstroPut.agressivo == '1' ? 'selected' : ''%>>Não</option>
                                <option value="2" <%= monstroPut.agressivo == '2' ? 'selected' : ''%>>Sim</option>
                            </select>
                          </label>
                        </fieldset>
                        <hr>
                        <fieldset>
                          <label for="sexo">Sexo:</label>
                          <input type="text" name="sexo" required value="<%= monstroPut.sexo.trimRight() %>"/>
                        </fieldset>  
                        <hr>
                        <fieldset>
                          <label for="raca">Raça:</label>
                          <input type="text" name="raca" required value="<%= monstroPut.raca.trimRight() %>"/>
                        </fieldset>
                        <hr>
                        <fieldset>
                          <label for="pesquisador">Pesquisador:</label>
                          <input type="text" name="pesquisador" required value="<%= monstroPut.pesquisador.trimRight() %>"/>
                        </fieldset>
                        <hr>
            
                        <fieldset>
                          <label for="imagem">Imagem:</label>
                          <input type="url" name="imagem" required value="<%= monstroPut.imagem.trimRight() %>"/>
                        </fieldset>
            
                        
                      </fieldset>

                      <fieldset id="fieldSecundario">
                        <legend>Descrição do Monstro!</legend>
                        <fieldset>

                          <textarea
                              name="descricao"
                              class="cade"
                              cols="50"
                              rows="5"
                              required
                          ><%= monstroPut.descricao.trimRight() %></textarea>
                        </fieldset>
                      </fieldset>

                      <fieldset id="fieldTerceario">
                        <legend>Características do Monstro!</legend>
                        
                        <fieldset>
                          <textarea
                          name="caracteristica"
                          class="cade"
                          cols="20"
                          rows="5"
                          required
                          ><%= monstroPut.caracteristica.trimRight() %></textarea>
                        </fieldset>
                      </fieldset>

                      <fieldset id="fieldQuarteario">
                        <div id="envia">
                          <p>
                            Você assina que todos os dados fornecidos são verdadeiros?
                          </p>
                          <label class="toggle-check">
                            <input
                              type="checkbox"
                              class="toggle-check-input"
                              required
                              oninvalid="this.setCustomValidity('É obrigatório que todas as informações sejam verdadeiras!')"
                              oninput="this.setCustomValidity('')"
                            />
                            <span class="toggle-check-text"></span>
                          </label>
                        </div>
                        
                        <button type="submit" class="botaoCadastro">Atualizar</button>
                      </fieldset>
                    </form>
                  </section>
            </section>
        </div>
        </div>
    </div>
</section>
