deloco

html:
{% extends "layout.html" %}

{% block title %}
    Reportes de Victimas
{% endblock %}

{% block main %}
<h1 class="display-4">Reportes de Víctimas</h1>
    <form action="/" method="post">
        <table class="table table-striped" id="myTableVict">
        <thead>
            <tr>
                <th>Escuela</th>
                <th>

                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="dropdown-button">Curso
                      <span class="caret"></span></button>
                      <div class="dropdown-content"  id="divo">
                        <a href="#">Todos</a>
                        {% for hechito in hechitos %}
                        <a href="#">{{ hechito.curso }}</a>
                        {% endfor %}

                  </div>
                  </div>
                </th>
                <th>Descripción del hecho</th>
            </tr>
        </thead>

        <tbody>
<!--for is to loop in each row of the table of the selected database,you have to use { always with a space at left and right  and stock.nam the . because it is like opening a dict and chosing the column name -->

    {% for hecho in hechos %}
                <tr>
                    <td>{{ hecho.escuela }}</td>
                    <td>{{ hecho.curso }}</td>
                    <td>{{ hecho.hecho }}</td>

                </tr>
            {% endfor %}

        </tbody>
    </table>
    </form>
    <script>
              var table = document.getElementById("myTableVict");
              var inputs = table.getElementsByTagName("a");
          //    var rows = table.getElementsByTagName("tr");
              var rows = table.tBodies[0].rows

              for (var i = 0; i < inputs.length; i++) {

                var input = inputs[i];

                input.addEventListener("click", function () {
                  var selectedCourse = this.textContent.trim();

                //  alert(selectedCourse);
                  for (row of rows) {

                    let td = row.getElementsByTagName('td')[1]
                    if (!td) { continue }
                    let course = td.textContent.trim()
                    if (course === selectedCourse || selectedCourse == "Todos") {

                      row.style.removeProperty('display')
                    } else {
                      row.style.setProperty('display', 'none')
                    }
                    }
                });
              }

              $(function() {
                var dropdownMenu;
                $('#dropdown-button').hover(function(e) {
                  dropdownMenu = $(e.target).siblings('.dropdown-content');

                    // detach it and append it to the body
                    $('body').append(dropdownMenu.detach());

                    // grab the new offset position
                    var eOffset = $(e.target).offset();

                    // make sure to place it where it would normally go (this could be improved)
                    dropdownMenu.css({
                        'display': 'block',
                            'top': eOffset.top + $(e.target).outerHeight(),
                            'left': eOffset.left
                    });
                }, function(e) {
                  $(e.target).parent().append(dropdownMenu.detach());
                    dropdownMenu.hide();
                });
              });
    </script>

{% endblock %}


LAYOUT.HTML:
<!DOCTYPE html>

<html lang="en">

    <head>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- documentation at http://getbootstrap.com/docs/4.1/, alternative themes at https://bootswatch.com/ -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">

        <!-- https://favicon.io/emoji-favicons/money-mouth-face/ -->
        <link href="/static/favicon.ico" rel="icon">

        <link href="/static/styles.css" rel="stylesheet">

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


        <title>Bullyng</title>

    </head>

    <body>

        <nav class="navbar navbar-expand-md navbar-light bg-light border">

            <button aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbar" data-toggle="collapse" type="button">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">

                {% if session.user_id %}
                    <a class="navbar-brand" href="/"><span class="blue">B</span><span class="red">u</span><span class="yellow">l</span><span class="green">l</span><span class="red">yng</span><span class="blue">Escuelas</span></a>
                    <ul class="navbar-nav mr-auto mt-2">

                        <li class="nav-item"><a class="nav-link" href="/reportesrecibidos">Reportes Recibidos</a></li>
                    </ul>

                    <ul class="navbar-nav ml-auto mt-2">
                        <li class="nav-item"><a class="nav-link" href="/logout">Cerrar Sesión</a></li>
                    </ul>
                {% else %}
                <a class="navbar-brand" href="/"><span class="blue">B</span><span class="red">u</span><span class="yellow">l</span><span class="green">l</span><span class="red">yng</span></a>
                <ul class="navbar-nav mr-auto mt-2">
                <ul class="navbar-nav mr-auto mt-2">
                    <li class="nav-item"><a class="nav-link" href="/logreg">Escuela</a></li>
                    <li class="nav-item"><a class="nav-link" href="/elegi">Estudiante</a></li>
                    <li class="nav-item"><a class="nav-link" href="/psicologo">Hablar gratis con un psicologo</a></li>
                    <li class="nav-item"><a class="nav-link" href="/argentina">Bullying en Argentina</a></li>


                </ul>
                {% endif %}

            </div>
        </nav>

        {% if get_flashed_messages() %}
            <header>
                <div class="alert alert-primary border text-center" role="alert">
                    {{ get_flashed_messages() | join(" ") }}
                </div>
            </header>
        {% endif %}

        <main class="container p-5">
            {% block main %}{% endblock %}
        </main>


    </body>

</html>

CSS:
nav .navbar-brand
{
    /* size for brand */
    font-size: xx-large;
}

/* colors for brand */
nav .navbar-brand .blue
{
    color: #537fbe;
}
nav .navbar-brand .red
{
    color: #ea433b;
}
nav .navbar-brand .yellow
{
    color: #f5b82e;
}
nav .navbar-brand .green
{
    color: #2e944b;
}

main .form-control
{
    /* center form controls */
    display: inline-block;

    /* override Bootstrap's 100% width for form controls */
    width: auto;
}

main
{
    /* scroll horizontally as needed */
    overflow-x: auto;

    /* center contents */
    text-align: center;
}

main img
{
    /* constrain images on small screens */
    max-width: 100%;
}
.text-primary
{
    font-size: 21px;
}
.text-primarytwo
{
    font-size: 21px;
    color: #0041C2;
}
#textbox
{
    height:200px;
    width: 300px;
}
#boton
{
    height:50px;
    width: 300px;
}
#elegireportes
{
    height:50px;
    width: 250px;
}
#estudiantefoto
{
    height:50px;
    width: 250px;
}
#logreg
{
    height:60px;
    width: 200px;
    font-weight: 450;
}
#parrafopsi{
  font-size: 20px;
}
#elegilo
{
    height:60px;
    width: 200px;
    font-size: 23px;
}
#reps
{
    height:60px;
    width: 400px;
    font-size: 23px;
}
#loginx
{
    height:50px;
    width: 300px;

}

#boton2
{
    height:50px;
    width: 250px;
}
input[name=nombreescuela], input[name=curso], input[name=victima], select[name=provincia], input[name=username], input[name=confirmation], input[name=password], input[name=mail]
{
    width: 300px;
}
/* Dropdown Button */
.dropbtn, #naco {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
/* boton 2 */
.button1 {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}