{% extends 'base.html' %}
{% load staticfiles %}
{% block content %}
<section class="hero is-medium is-dark is-bold">
  <div class="hero-body" style="background-color: #04243B">
    <div style="text-align: center">
      <div class="container">
        <img src="{% static 'app/tutorialdb.png' %}" alt="tutorialdb">
      </div>
      <h1 class="subtitle">A search engine for programming/dev tutorials.</h1>
      <img src="{% static 'app/computer.svg' %}" height="100" width="100" alt="computer">
    </div>
  </div>
</section>
<div style="text-align: center">
    <section class="hero is-medium is-success is-bold">
      <div class="hero-body" style="background-color: orange">
        <div class="container">
          <h3 class="title is-3">🙅🏽‍♂️ No useless stuff or ads.</h3>
          <h3 class="title is-3">✅ Direct Links to tutorials.</h3>
          <h3 class="title is-3">🚀 Start learning asap.</h3>
        </div>
      </div>
    </section>
</div>
<section class="section">
  <div class="container">
    <h1 class="title" style="text-align: center">Search Tutorials</h1>
    <div style="text-align: center">
      <img src="{% static 'app/search.png' %}" height="100" width="100" alt="search">
    </div>
    <br>
    <form action="{% url 'app:search-results' %}" method="get" onsubmit="return checkEmpty()">
      <div class="field">
        <div class="control has-icons-left">
          <input class="input is-rounded" name="q" type="search" placeholder="search tutorials..." id="search-bar" value="{{ query }}">
          <span class="icon is-small is-left">
            <i class="fa fa-search" aria-hidden="true"></i>
          </span>
        </div>
      </div>
      <div class="field">
        <label class="label">Filter</label>
        <div class="field is-grouped">
          <div class="control">
            <div class="select is-rounded">
              <select name="category">
                <option disabled selected value="">Select Category</option>
                {% for category_value, category_name in categories %}
                  <option value="{{ category_value }}"
                  {% if category_value == category %} selected {% endif %}
                  >
                  {{ category_name }}
                  </option>
                {% endfor %}
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="control">
        <button class="button is-primary is-rounded" id="submit-button" onclick="focusMe()" type="submit">Search</button>
      </div>
    </form>
  </div>
</section>
{% block results %}{% endblock results %}
{% endblock content %}