{% extends 'base.html' %}

{% block title %}
{% if request.args.get('query', default=False) %}
  {{ _('Search results') }}
{% else %}
  {{ _('Search') }}
{% endif %}
- CritiqueBrainz
{% endblock %}

{% block content %}
<h3>{{ _('Search') }}</h3>

<form method="GET" class="form-horizontal" role="form">
  <div class="form-group">
    <label for="input-query" class="col-sm-2 control-label">{{ _('Query') }}</label>
    <div class="col-sm-3">
      <input id="input-query" name="query" class="form-control" required value="{{ request.args.get('query', default='') }}">
    </div>
  </div>
  <div class="form-group">
    <label for="type-selector" class="col-sm-2 control-label">{{ _('Type') }}</label>
    <div class="col-sm-2">
      <select id="type-selector" name="type" class="form-control">
        <optgroup label="MusicBrainz">
          <option value="artist" {% if type=="artist" %}selected="selected"{% endif %}>{{ _('Artist') }}</option>
          <option value="work" {% if type=="work" %}selected="selected"{% endif %}>{{ _('Work') }}</option>
          <option value="label" {% if type=="label" %}selected="selected"{% endif %}>{{ _('Label') }}</option>
          <option value="event" {% if type=="event" %}selected="selected"{% endif %}>{{ _('Event') }}</option>
          <option value="place" {% if type=="place" %}selected="selected"{% endif %}>{{ _('Place') }}</option>
          <option value="release-group" {% if type=="release-group" %}selected="selected"{% endif %}>{{ _('Release group') }}</option>
          <option value="recording" {% if type=="recording" %}selected="selected"{% endif %}>{{ _('Recording') }}</option>
        </optgroup>
        <optgroup label="BookBrainz">
          <option value="bb_author" {% if type=="bb_author" %}selected="selected"{% endif %}>{{ _('Author') }}</option>
          <option value="bb_edition_group" {% if type=="bb_edition_group" %}selected="selected"{% endif %}>{{ _('Edition Group') }}</option>
          <option value="bb_literary_work" {% if type=="bb_literary_work" %}selected="selected"{% endif %}>{{ _('Literary Work') }}</option>
          <option value="bb_series" {% if type=="bb_series" %}selected="selected"{% endif %}>{{ _('Series') }}</option>
        </optgroup>
      </select>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">{{ _('Search') }}</button>
    </div>
  </div>
</form>

{% if request.args.get('query', default=False) %}
  <hr />
  {% if not results %}
    <p class="lead" style="text-align: center;">{{ _('No results found') }}</p>
  {% else %}

    <table id="search-results" class="table table-hover">
      <thead>
      {% if type == "artist" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Sort name') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Country') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "event" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Artist') }}</th>
          <th>{{ _('Location') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "place" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Location') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "release-group" %}
        <tr>
          <th>{{ _('Release group') }}</th>
          <th>{{ _('Artist') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "label" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Country') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "work" %}
        <tr>
          <th>{{ _('Title') }}</th>
          <th>{{ _('Artists') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Language') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "recording" %}
        <tr>
          <th>{{ _('Title') }}</th>
          <th>{{ _('Length') }}</th>
          <th>{{ _('Artist') }}</th>
          <th>{{ _('Release group') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "bb_edition_group" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Author') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "bb_literary_work" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Language') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "bb_author" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Gender') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% elif type == "bb_series" %}
        <tr>
          <th>{{ _('Name') }}</th>
          <th>{{ _('Type') }}</th>
          <th>{{ _('Write a review') }}</th>
        </tr>
      {% endif %}
      </thead>
      <tbody id="results">{% include 'search/results.html' %}</tbody>
    </table>

    {% if count > limit %}
      <div>
      <button id="more-button" type="button" class="btn btn-primary" onclick="load_more();" >{{ _('Load more results') }}</button>
      <span id="loading-message" class="text-muted" style="display:none;">{{ _('Loading more results...') }}</span>
    </div>
    {% endif %}

  {% endif %}
{% endif %}
{% endblock %}

{% if count > limit %}
  {% block scripts %}
    {{ super() }}
    <script>
      var current_page = 0;

      function load_more() {
        var more_button = $("#more-button");
        var loading_message = $("#loading-message");
        more_button.hide();
        loading_message.show();
        $.ajax({
          url: "{{ url_for('search.more') }}",
          data: { query: "{{ query }}", type: "{{ type }}", page: ++current_page }
        })
        .done(function(data) {
          loading_message.hide();
          $("#results").append(data.results);
          if (data.more === true) more_button.show();
        })
        .fail(function() {
          alert({{ _("Failed to load more search results!") | tojson }});
        });
      }
    </script>
  {% endblock %}
{% endif %}