{% extends "base.html" %}

{% block content %}

<BR>


<!-- Main container -->
<nav class="level">
  <!-- Left side -->
  <div class="level-left">
    <div class="level-item">
      <p class="subtitle is-6">
        Mostrando <strong>{{count}}</strong> películas
      </p>
    </div>
    <div class="level-item">
      <div class="field has-addons">
        <p class="control">
          <input class="input" id='search' type="text" placeholder="Buscar por nombre">
        </p>
        <p class="control">
          <button class="button is-info is-light" onclick='search_movie();'>Buscar</button>
        </p>
      </div>
    </div>
    <div class="level-item">
        <div class="select is-info">
        <select id='directors' onChange='director_change()'>
            <option>Por director</option>
            {% for director in directors %}
                {% ifequal selected_director director %}
                    <option selected>{{director}}</option>
                {% else %}
                    <option>{{director}}</option>
                {% endifequal %}
            {% endfor %}
        </select>
        </div>
    </div>
  </div>

  <!-- Right side -->
  <div class="level-right">
    <p class="level-item">
        {% if args %}
            <button class="button is-info is-light"><a href="/movies/">Ultimas</a></button>
        {% else %}
            <button class="button is-info is-light"><a href="/movies/all">Ver Todas</a></button>
        {% endif %}
    </p>
  </div>
</nav>


{% for row in movies %}
<div class="columns is-desktop is-variable is-1">
    {% for cell in row %}
      <div class="column" style="padding: 0.5rem;">
        <article class="media has-background-light custom-article">
          <figure class="media-left" style="padding-top: 0.75rem;">
            <img src='{{ cell.image }}' height='150' width='100'>
          </figure>
          <div class="media-content">
            <div class="content">
              <p>
                <strong><a class='downmovie' href='{{ cell.url }}' id={{ cell.id }}>{{ cell.name }}</a></strong>
                <BR>
                ({{ cell.original_name }})
              </p>
              <p>
                <strong>Director</strong>: {{ cell.director }} <br>
                <strong>País</strong>: {{ cell.country }} <br>
                <strong>Año</strong>: {{ cell.year }}, <strong>Duración</strong>: {{ cell.duration }} <br>
                <strong>Descargas</strong>: <span id='down{{cell.id}}'>{{ cell.count }}</span>
              </p>
            </div>
          </div>
        </article>
      </div>
    {% endfor %}
</div>
{% endfor %}

<BR>

{% endblock %}