<!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="/css/style.css">
    <link rel="icon" href="/img/icon.ico" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
    <title>Monstruario</title>
</head>
<body>
    <%- include('./partials/header.ejs') %>

    <% if(message != "") {%> 
        <%- include('./partials/alerts.ejs') %>
    <% } %>

    <main>

        <div id="apresentacao">
            <p>
                <span>
                    Olá, esse é o <b>MONSTRUARIO</b>, um mostruário de monstros! Sendo o terceiro e último projeto do segundo módulo do curso de desenvolvedor Full Stack!
                </span>
                
                <br>
                <br>
                <span>
                    Peço que faça um pouco de Role-Play e imagine um mundo fictício, onde vivemos no ano de 2022, mas há três anos um abalo sísmico aconteceu.
                </span>
                
                <br>
                <span>
                    O tremor foi tão forte que desequilibrou a ordem natural do mundo, monstros começaram a surgir, portais estranhos se abriram.
                </span>
                
                <br>
                <br>
                <span>
                    As pessoas de todo o mundo se viam indefesas perante a essa invasão estranha, infelizmente não demorou muito para que os monstros começassem a caçar os seres humanos, muitos morreram...
                </span>
                <br>
                <span>
                    Para acabar com os monstros, os governos se uniram e criaram o Monstruario, um sistema unificado de pesquisa para estudar os monstros e os seus comportamentos, para facilitar a caça deles.
                </span>
                
                <br>
                <span>
                    Pesquisadores ao redor do mundo se uniram a nós, mas ainda somos poucos, o sistema ainda está no começo, precisamos de toda a ajuda possível, por favor, se tiver dados sobre algum monstro, não hesite em cadastrar ele!
                </span>
                
            </p>
            <p id="final">-Presidente e Coordenador Geral do Monstruario-</p>
        </div>

        <div id="teste">

            <div id="teste_dois">
                <h1 id="titulo">Monstros:</h1>

                <select class="select-css scroll" onchange="document.location.href = '/' + this.value">
                    <option disabled selected>Ordenar monstros?</option>
                    <option disabled>Por Nome:</option>
                    <option value="?order=ASC&column=nome">Nome crescente</option>
                    <option value="?order=DESC&column=nome">Nome decrescente</option>
                    <option disabled>Por desastre:</option>
                    <option value="?order=ASC&column=desastre">Desastre crescente</option>
                    <option value="?order=DESC&column=desastre">Desastre decrescente</option>
                    <option value="?ver=true&column=desastre&valor=1">Fracos</option>
                    <option value="?ver=true&column=desastre&valor=2">Medianos</option>
                    <option value="?ver=true&column=desastre&valor=3">Fortes</option>
                    <option value="?ver=true&column=desastre&valor=4">Muito fortes</option>
                    <option value="?ver=true&column=desastre&valor=5">Ameças</option>
                    <option value="?ver=true&column=desastre&valor=6">Cataclismáticos</option>
                    <option disabled>Por pesquisador:</option>
                    <option value="?order=ASC&column=pesquisador">Pesquisador crescente</option>
                    <option value="?order=DESC&column=pesquisador">Pesquisador decrescente</option>
                    <option disabled>Agressivo?</option>
                    <option value="?ver=true&column=agressivo&valor=2">Sim</option>
                    <option value="?ver=true&column=agressivo&valor=1">Não</option>
                    <option disabled>Por raça:</option>
                    <option value="?order=ASC&column=raca">Raça crescente</option>
                    <option value="?order=DESC&column=raca">Raça decrescente</option>
                </select>
            </div>
            
            <hr id="linha">

        <section id="monster">
            <% monstruario.forEach(monstro => { %>
                <% if (monstro.desastre == 1) { %>
                    <article class="flip" id="fraco">
                <% } else if (monstro.desastre == 2) { %>
                    <article class="flip" id="mediano">
                <% } else if (monstro.desastre == 3) { %>
                    <article class="flip" id="forte">
                <% } else if (monstro.desastre == 4) { %>
                    <article class="flip" id="muito_forte">
                <% } else if (monstro.desastre == 5) { %>
                    <article class="flip" id="ameaca">
                <% } else if (monstro.desastre == 6) { %>
                    <article class="flip" id="cataclisma">
                <% } %>
                    <article class="card front">
                        <div class="nome_monstro"> <%= monstro.nome.trimRight() %> </div>
                        <hr>
                        <div class="img_monstro"> <img src="<%= monstro.imagem.trimRight() %>" alt="Imagem do monstro <%= monstro.nome.trimRight() %> ">  </div>
                        <hr>
                        <div class="tipo_monstro"> 
                            <div class="verificacao"><%= monstro.raca.trimRight() %></div>
                            
                            <div class="verificacao pesq"><span id="a">a. </span><%= monstro.pesquisador.trimRight() %></div>
                            <hr id="ass">
                        </div>
                    </article>

                    <article class="card back">
                        <div class="nome_monstro"> <%= monstro.nome.trimRight() %> </div>
                        <hr>
                        <div class="back_detalhes">
                            <table class="tabela_index">
                                <tr class="tr_index">
                                  <thead class="thead_index">
                                    <th colspan="2">Detalhes</th>
                                  </thead>
                                  <tbody>
                                      <tr>
                                          <td>Sexo:</td>
                                          <td class="verificacao"><%= monstro.sexo.trimRight() %></td>
                                      </tr>
              
                                    <tr>
                                      <td>Raça:</td>
                                      <td class="verificacao"><%= monstro.raca.trimRight() %></td>
                                    </tr>
                                    
                                    <tr>
                                    <td>Desastre:</td>
                                      <% if (monstro.desastre == 1) { %>
                                          <td> Fraco </td>
                                      <% } else if (monstro.desastre == 2) { %>
                                          <td> Mediano </td>
                                      <% } else if (monstro.desastre == 3) { %>
                                          <td> Forte </td>
                                      <% } else if (monstro.desastre == 4) { %>
                                          <td> Muito forte </td>
                                      <% } else if (monstro.desastre == 5) { %>
                                          <td> Ameaça </td>
                                      <% } else if (monstro.desastre == 6) { %>
                                          <td> Cataclisma </td>
                                      <% } %>
                                    </tr>
              
                                    <tr>
                                      <td>Agressivo? </td>
                                      <% if (monstro.agressivo == 1) { %>
                                          <td> Não </td>
                                        <% } else if (monstro.agressivo == 2) { %>
                                            <td> Sim </td>
                                        <% } %>
                                    </tr>
                      
                                    <tr>
                                      <td>Idade:</td>
                                      <td><%= monstro.idade.trimRight() %></td>
                                    </tr>
                                  </tbody>
                                </tr>
                              </table> 
                        </div>
                        <hr>
                        <section id="atributos">
                            <div class="link"><a href="/detalhes/<%= monstro.id %>">Detalhes...</a></div>
                            <div class="link"><a href="/getById/<%= monstro.id %>/put">Editar...</a></div>
                            <div class="link"><a href="/getById/<%= monstro.id %>/delete">Apagar...</a></div>
                        </section>
                        
                    </article>

                </article>

            <% }) %>

        </section>
        </div>
    </main>

    <% if (monstroPut != null){%>
        <%- include('./partials/modalPut.ejs') %>
    <% } %>

    <% if (monstroDel != null){%>
        <%- include('./partials/modalDel.ejs') %>
    <% } %> 

    <%- include('./partials/footer.ejs') %>
 
</body>
<script>
    const cards = document.querySelectorAll(".flip");

    function flipCard() {
        this.classList.toggle("virar");
    }
    cards.forEach((card) => card.addEventListener("click", flipCard));



    const closeAlert = () => {
    const close = document.querySelector("#close-message");
    const message = document.querySelector(".message");

    close.addEventListener("click", () => {
        message.style.display = "none";
    });

    setTimeout(() => {
        message.style.display = "none";
    }, 5000);
};

closeAlert();


let selectEl = document.getElementsByTagName('select');
selectEl[0].addEventListener('change', function() {
    location.href=this.value;
});
</script>
</html>