{% ckan_extends %}

{% block styles %}
{{ super() }}
<link rel="stylesheet" href="/datapackage_creator/css/styles.css">
{% endblock %}

{% block form %}

<h2><b>Recursos</b></h2>

<div role="main">
    <section class="container">
        <nav class="navbar navbar-expand-lg navbar-light nav-color nav-margin border-top border-bottom">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-auto">
                        <label class="visually-hidden" for="nomeRecurso">Nome</label>
                        <div class="input-group">
                          <div class="input-group-text">Nome</div>
                          <input type="text" class="form-control" id="nomeRecurso" placeholder="Digite o Nome do Recurso">
                        </div>
                    </div>
                    <div class="col-auto">
                        <label class="visually-hidden" for="arquivoRecurso">Arquivo</label>
                        <div class="input-group">
                            <!-- Aqui será carregado o texto do input file -->
                            <div class="input-group-text">Arquivo</div>
                            <input type="text" class="form-control" id="arquivoRecurso" placeholder="Carregue o Arquivo...">
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-primary" role="button" title="carregar">
                            <!-- Input File do campo Arquivo -->
                            <input type="file" class="d-none" id="upFile"><label for="upFile">Carregar</label>
                        </button>
                    </div>
                    <div class="col-auto">
                        <button type="button" role="button" class="btn"><i class="fa-solid fa-trash"></i></button>
                        <button type="button" role="button" class="btn"><i class="fa-solid fa-floppy-disk"></i></button>
                        <button type="button" role="button" class="btn" data-bs-toggle="collapse" data-bs-target="#collapseForm" aria-expanded="false" aria-controls="collapseForm"><i class="fa-solid fa-chevron-up"></i></button>
                    </div>
                </div>
            </div>
        </nav>
    </section>
    <form id="collapseForm" class="module module-narrow module-shallow">
        <br>
        <div class="container">
            <!-- COMPONENTE DA COLUNA -->
            <div class="row">
              <div class="col-lg-3 col-sm-6 col-xs-12">
                <div class="card" style="width: 13rem;">

                    <div class="card-header" style="background-color: #4F5E71;">
                      <input type="text" placeholder="Nome da Coluna" class="input-group-addon rounded text-center" style="width: 8.2rem; padding-top: 4%; background-color: #6d7278; color: white;">
                      <button type="button" class="btn" style="color: white;"><i class="fa-solid fa-trash"></i></button>
                    </div>

                    <div class="card-body">
                        <div class="accordion" id="colunaItem">
                            <div class="accordion-item">
                              <h2 class="accordion-header" id="headingOne">
                                <button id="btn-coluna" class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                  Pré-visualizar item
                                </button>
                              </h2>
                              <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#colunaItem">
                                <div class="accordion-body">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                              <th scope="col">Nome_da_Coluna</th>
                                            </tr>
                                          </thead>
                                          <tbody>
                                            <tr>
                                              <td>Item 1</td>
                                            </tr>
                                            <tr>
                                              <td>Item 2</td>
                                            </tr>
                                            <tr>
                                              <td>Item 3</td>
                                            </tr>
                                          </tbody>
                                    </table>
                                </div>
                              </div>
                            </div>
                          </div>
                          <br>

                          <div class="mb-3">
                            <label for="tituloModal" class="form-label">Titulo</label>
                            <input type="text" class="form-control" id="tituloModal" placeholder="Insira um titulo">
                          </div>

                    </div>

                    <div class="card-footer">
                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editarMeta"><i class="fa-solid fa-pencil"></i>&nbsp;&nbsp;&nbsp;Editar Metadados</button>
                    </div>
                  </div>
              </div>

              <!-- MODAL -->
              <div class="modal fade" id="editarMeta" tabindex="-1" aria-labelledby="editarMetaLabel" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h1 class="modal-title fs-3" id="editarMetaLabel">Editar Metadados</h1>
                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>

                    <div class="modal-body">
                      <h4 style="color: rgb(186, 186, 186);">Geral</h4>
                      <div class="row">
                      <div class="col-8">
                          <div class="mb-3">
                            <label for="tituloModal" class="form-label">Titulo</label>
                            <input type="text" class="form-control" id="tituloModal" placeholder="Insira um titulo">
                          </div>
                          <div class="mb-3">
                            <label for="descricaoModal" class="form-label">Descrição</label>
                            <textarea class="form-control" id="descricaoModal" rows="8"></textarea>
                          </div>
                      </div>
                      <div class="col-4">
                        <div>
                            <label for="tipoDado">Tipo de Dado</label>
                            <select name="tipoDado" id="tipoDado" class="form-select">
                                <option value="0">String</option>
                                <option value="1">Number</option>
                                <option value="2">Boolean</option>
                            </select>
                        </div>
                            <br>
                        <div>
                            <label for="formatoDado">Formato de Dado</label>
                            <select name="formatoDado" id="formatoDado" class="form-select">
                                <option value="0">Default</option>
                                <option value="1">JSON</option>
                                <option value="2">CSV</option>
                                <option value="3">PNG</option>
                                <option value="4">XLS</option>
                            </select>
                        </div>
                            <br>
                        <div>
                            <label for="obrigatorio">Obrigatório</label>
                            <select name="obrigatorio" id="obrigatorio" class="form-select">
                                <option value="0">Não</option>
                                <option value="1">Sim</option>
                            </select>
                        </div>
                            <br>
                        <div>
                            <label for="unico">Único</label>
                            <select name="unico" id="unico" class="form-select">
                                <option value="0">Não</option>
                                <option value="1">Sim</option>
                            </select>
                        </div>

                      </div>
                    </div>
                    <br>
                    <h4 style="color: rgb(186, 186, 186);">Avançado</h4>
                    <div class="row">
                        <div class="col-lg-4 col-sm-6 col-xs-12">
                            <div class="add-meta border border-2 rounded">
                                <label for="tipoMeta">Escolha o tipo de Metadado</label>
                                <select name="tipoMeta" id="tipoMeta" class="form-select">
                                    <option value="0" disabled selected>Lista de Metadados</option>
                                    <option value="1">Lista</option>
                                    <option value="2">Lista de Valores</option>
                                    <option value="3">Máximo e Mínimo</option>
                                    <option value="4">Padrão</option>
                                    <option value="5">Tamanho Máximo e Mínimo</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-6 col-xs-12">
                            <button type="button" class="pontilhado-azul rounded"><i class="fa-solid fa-plus"></i><br> Adicionar Metadados</button>
                        </div>

                        <div class="col-lg-4 col-sm-6 col-xs-12">
                            <p class="text-center">COL-3</p>
                        </div>

                    </div>
                    </div>

                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary">Salvar <i class="fa-solid fa-circle-check"></i></button>
                    </div>

                  </div>
                </div>
              </div>
              <!-- FIM DO MODAL -->
            </div>
          </div>

          <br>
          <h4 class="container">Dados do Recurso</h4>
          <br>

          <form class="module module-narrow module-shallow">
            <div class="container">
              <div class="mb-3">
                <label for="titulo" class="form-label">Título</label>
                <input type="text" class="form-control" id="titulo" placeholder="Escreva um título para os dados do recurso">
              </div>
              <div class="mb-3">
                <label for="descricao" class="form-label">Descrição</label>
                <textarea class="form-control" id="descricao" rows="4"></textarea>
              </div>
              <div class="row">
                <div class="col-lg-4 col-sm-6 col-xs-12">
                    <label for="formatoRecurso">Formato do Recurso</label>
                    <select name="formato_recurso" id="formatoRecurso" class="form-select">
                        <option value="0">PNG</option>
                        <option value="1">JSON</option>
                        <option value="2">CSV</option>
                        <option value="3">XLS</option>
                    </select>
                </div>

                <div class="col-lg-4 col-sm-6 col-xs-12">
                    <label for="tipoRecurso">Tipo</label>
                    <select name="tipoRecurso" id="tipoRecurso" class="form-select">
                        <option value="0">Tabular</option>
                        <option value="1">Não Tabular</option>
                        <option value="2">Fiscal</option>
                    </select>
                </div>

                <div class="col-lg-4 col-sm-6 col-xs-12">
                    <label for="codificacaoRecurso">Codificação</label>
                    <select name="codificacaoRecurso" id="codificacaoRecurso" class="form-select">
                        <option value="0">ASCII</option>
                        <option value="1">ISO-8859-1</option>
                        <option value="2">UTF-8</option>
                        <option value="3">UTF-16</option>
                        <option value="4">UTF-32</option>
                    </select>
                </div>
              </div>
            </div>
            <br>
            <div class="container">
                <div class="row">
                    <div class="col-lg-4 col-sm-6 col-xs-12">
                        <div class="add-meta border border-2 rounded">
                            <label for="tipoMeta">Escolha o tipo de Metadado</label>
                            <select name="tipoMeta" id="tipoMeta" class="form-select">
                                <option value="0" disabled selected>Lista de Metadados</option>
                                <option value="1">Lista</option>
                                <option value="2">Lista de Valores</option>
                                <option value="3">Máximo e Mínimo</option>
                                <option value="4">Padrão</option>
                                <option value="5">Tamanho Máximo e Mínimo</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-xs-12">
                        <button type="button" class="pontilhado-azul rounded"><i class="fa-solid fa-plus"></i><br> Adicionar Metadados</button>
                    </div>

                    <div class="col-lg-4 col-sm-6 col-xs-12">
                        <p class="text-center">COL-3</p>
                    </div>
                </div>
                <br>
            </div>
          </form>

          <br>

          <div class="row">
            <button type="button" class="pontilhado"><p class="text-start" style="margin-top: 15px;"><i class="fa-solid fa-plus"></i>Adicionar Recurso</p></button>
          </div>
            <br>
          <div class="row justify-content-end">
            <div class="col-auto aling-self-end">
                <button type="button" class="btn btn-secondary">Validar Dados</button>
                <button type="submit" class="btn btn-primary">Publicar Conjunto</button>
            </div>
          </div>


    </form>
</div>
{% endblock %}
