<!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="/style.css">
    <title>Cadastro</title>
</head>

<body>
   
    <nav>
        <ul>
            <li>

                <a href="/">
                    <h1>Unidades de conservação do Estado do Rio Grande do Sul</h1>
                </a>

            </li>
            <li><a href="/">Inicio</a></li>
            <li><a href="/register">Cadastro</a></li>
            <li><a href="/#cards">Unidades</a></li>
            <li> <a href="/#cards">Atualizar Unidades</a></li>

        </ul>
    </nav>
    <header>
        <img src="https://www.advisian.com/-/media/images/home/who-we-are/news/2021/clfn-and-advisian-announce-limited-partnership/cold-lake-river.ashx?h=500&w=1500&la=en&hash=B74E682A21E1E77A632B9F409ECADA05" alt="banner">
       
    </header>
    <section id="cadastro">

        <div>
            <h2>Detalhes da Unidade!</h2>

            <div class="cardD">
                <img src="<%= uec.imagem %>" alt=""></a>

            </div>

            <div class="cardDt">
                <h2>
                    <%= uec.nome %>
                </h2>
                <p class="descricao">
                    <%= uec.descricao%>
                </p>
                <p>Visitação: <%= uec.visitacao %>
                </p>
                <p>Biomas: <%= uec.biomas %>
                </p>
                <a href="<%= uec.localizacao%>" target="_blank">Localização</a>
                <a id="editar" href="/getById/<%= uec.id %>/put">Editar</a>
                <a id="delete" href="/getById/<%= uec.id %>/delete">Deletar</a>
            </div>
        </div>
    </section>
    <% if (uecPut!=null) {%>
        <section class="modal-overlay" id="overlay">
            <div class="modal" id="modal">
                <div class="modal-header">
                    <h3>Atualizar Unidade</h3>
                    <a href="/" id="close-modal-put">x</a>
                </div>
                <div class="modal-body">
                    <form class="form-modal" action="/update/<%= uecPut.id %>" method="post">

                        <label for="nome">Nome:</label>
                        <input type="text" id="nome" name="nome" value="<%= uecPut.nome%>">

                        <label for="imagem">Link da imagem:</label>
                        <input type="text" id="imagem" name="imagem" value="<%= uecPut.imagem%>">

                        <label for="descricao">Descrição:</label>
                        <input type="text" id="descricao" name="descricao" value="<%= uecPut.descricao %>">

                        <label for="visitacao">Visitação:</label>
                        <input type="text" id="visitacao" name="visitacao" value="<%= uecPut.visitacao %>">

                        <label for="biomas">Biomas:</label>
                        <input type="text" id="biomas" name="biomas" value="<%= uecPut.biomas %>">

                        <label for="localizacao">Link da Localização:</label>
                        <input type="text" id="localizacao" name="localizacao" value="<%= uecPut.localizacao %>">

                        <button onclick="cadastro()" type="submit">Atualizar</button>
                    </form>
                </div>
            </div>
        </section>
        <% } %>

            </section>
            <% if (uecDel!=null) {%>
                <section class="modal-overlay" id="overlay">
                    <div class="modal" id="modal">
                        <div class="modal-header">
                            <h3>Remover Unidade</h3>
                            <a href="/" id="close-modal-put">x</a>
                        </div>
                        <div class="modal-body">
                            <p>Deseja remover a unidade <%= uecDel.nome %>
                            </p>
                            <div id="btns-del">
                                <a id="no" href="/">Não</a>
                                <a id="yes" href="/remove/ <%= uecDel.id %> ">Sim</a>
                            </div>
                        </div>
                    </div>
                </section>
                <% } %>
                    <footer>
                        <p>Todos os direitos reservados para Charles Marques</p>
                        <p>Dados retirados de <a href="https://sema.rs.gov.br/unidades-de-conservacao-estaduais" target="blank">https://sema.rs.gov.br/</a></p>
                    </footer>
                    <script src="/script.js" ></script>
</body>

</html>