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

    <main>
      <div id="teste">
        <section class="container">

            <div id="more">
                <div class="tab">

                    <button class="tablinks" onclick="alterarDesc(event, 'Descricao')" id="defaultOpen">Descrição</button>
                    <button class="tablinks" onclick="alterarDesc(event, 'Caracteristicas')">Características</button>
                </div>

                <div id="Descricao" class="tabcontent">
                    <h3>Descrição: </h3>
                    <p><%= deMonstro.descricao.trimRight() %></p>

                </div>

                <div id="Caracteristicas" class="tabcontent">
                    <h3>Características: </h3>
                    <p><%= deMonstro.caracteristica.trimRight() %></p>
                </div>
            </div>

            <% if (deMonstro.desastre == 1) { %>
                <div id="side" class="si_fraco">
            <% } else if (deMonstro.desastre == 2) { %>
                <div id="side" class="si_mediano">
            <% } else if (deMonstro.desastre == 3) { %>
                <div id="side" class="si_forte">
            <% } else if (deMonstro.desastre == 4) { %>
                <div id="side" class="si_muito_forte">
            <% } else if (deMonstro.desastre == 5) { %>
                <div id="side" class="si_ameaca">
            <% } else if (deMonstro.desastre == 6) { %>
                <div id="side" class="si_cataclisma">
            <% } %>
                <div id="name">
                    <h1><%= deMonstro.nome.trimRight() %></h1>
                </div>
    
                <div id="img">
                  <img src="<%= deMonstro.imagem.trimRight() %>" alt="Imagem do monstro <%= deMonstro.nome.trimRight() %>" />
                </div>
        
                <table>
                  <tr>
                    <thead>
                      <th colspan="2">Detalhes</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Sexo:</td>
                            <td><%= deMonstro.sexo.trimRight() %></td>
                        </tr>

                      <tr>
                        <td>Raça:</td>
                        <td><%= deMonstro.raca.trimRight() %></td>
                      </tr>
                      
                      <tr>
                      <td>Desastre:</td>
                        <% if (deMonstro.desastre == 1) { %>
                            <td> Fraco </td>
                        <% } else if (deMonstro.desastre == 2) { %>
                            <td> Mediano </td>
                        <% } else if (deMonstro.desastre == 3) { %>
                            <td> Forte </td>
                        <% } else if (deMonstro.desastre == 4) { %>
                            <td> Muito forte </td>
                        <% } else if (deMonstro.desastre == 5) { %>
                            <td> Ameaça </td>
                        <% } else if (deMonstro.desastre == 6) { %>
                            <td> Cataclisma </td>
                        <% } %>
                      </tr>

                      <tr>
                        <td>Agressivo? </td>
                        <% if (deMonstro.agressivo == 1) { %>
                          <td> Não </td>
                        <% } else if (deMonstro.agressivo == 2) { %>
                            <td> Sim </td>
                        <% } %>
                      </tr>
        
                      <tr>
                        <td>Idade:</td>
                        <td><%= deMonstro.idade.trimRight() %></td>
                      </tr>
        
                      <tr>
                        <td>Altura:</td>
                        <td><%= deMonstro.altura.trimRight() %></td>
                      </tr>
        
                      <tr>
                        <td>Peso:</td>
                        <td><%= deMonstro.peso.trimRight() %></td>
                      </tr>

                      <tr>
                        <td>Registrado por:</td>
                        <td><%= deMonstro.pesquisador.trimRight() %></td>
                      </tr>
                    </tbody>
                  </tr>
                </table> 
            </div>

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

    <%- include('./partials/footer.ejs') %>
</body>

<script>
    function alterarDesc(evt, guia) {
  // Declare all variables
  let i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(guia).style.display = "block";
  evt.currentTarget.className += " active";
}

document.getElementById("defaultOpen").click();
</script>

</html>