{% extends "base.html" %}

{% block title %}
{{ _('Search Results') }}
{% endblock %}

{% block head %}
{{ super() }}

{% if not ui.vue_calendar_ui %}
<link rel="stylesheet" href="{{ static_prefix }}/css/query.css">
<script src="{{ static_prefix }}/js/url-polyfill.min.js"></script>
<script src="{{ static_prefix }}/query.js"></script>
{% else %}

<script src="{{ static_prefix }}/loading-spinner/loading-spinner.js"></script>
<script src="{{ static_prefix }}/vue/vueui.js"></script>

{% endif %}

<script>
    var i18nStrings = {
        jan_long: "{{ _Q('January') }}",
        feb_long: "{{ _Q('February') }}",
        mar_long: "{{ _Q('March') }}",
        apr_long: "{{ _Q('April') }}",
        may_long: "{{ _Q('May') }}",
        jun_long: "{{ _Q('June') }}",
        jul_long: "{{ _Q('July') }}",
        aug_long: "{{ _Q('August') }}",
        sep_long: "{{ _Q('September') }}",
        oct_long: "{{ _Q('October') }}",
        nov_long: "{{ _Q('November') }}",
        dec_long: "{{ _Q('December') }}",
        jan_short: "{{ _Q('Jan') }}",
        feb_short: "{{ _Q('Feb') }}",
        mar_short: "{{ _Q('Mar') }}",
        apr_short: "{{ _Q('Apr') }}",
        may_short: "{{ _Q('May') }}",
        jun_short: "{{ _Q('Jun') }}",
        jul_short: "{{ _Q('Jul') }}",
        aug_short: "{{ _Q('Aug') }}",
        sep_short: "{{ _Q('Sep') }}",
        oct_short: "{{ _Q('Oct') }}",
        nov_short: "{{ _Q('Nov') }}",
        dec_short: "{{ _Q('Dec') }}",
        "All-time": "{{ _Q('All-time') }}",
        "show timeline":"{{ _Q('show timeline') }}",
        "hide timeline":"{{ _Q('hide timeline') }}",
        "show calendar":"{{ _Q('show calendar') }}",
        "hide calendar":"{{ _Q('hide calendar') }}",
        "View capture on {date}":"{{ _Q('View capture on {date}') }}",
        "Loading...": "{{ _Q('Loading...') }}",
        "Current Capture": "{{ _Q('Current Capture') }}",
        "capture": "{{ _Q('capture') }}",
        "captures": "{{ _Q('captures') }}",
    };
</script>

{% endblock %}


{% block body %}

{% if not ui.vue_calendar_ui %}
<div class="container-fluid">
    <div class="row justify-content-center">
        <h4 class="display-4 text-center text-sm-left p-0">{{ _('Search Results') }}</h4>
    </div>
</div>
<div class="container">
    <div class="row justify-content-center text-center text-sm-left mt-1" id="display-query-type-info"></div>
</div>
<div class="container mt-3 q-display" id="captures"></div>
{% endif %}


{% if ui.vue_calendar_ui %}
<div id="app" style="width: 100%; height: 100%"></div>
{% endif %}

<script>
  var text = {
      months: {
       '01': "{{ _('January') }}",
       '02': "{{ _('February') }}",
       '03': "{{ _('March') }}",
       '04': "{{ _('April') }}",
       '05': "{{ _('May') }}",
       '06': "{{ _('June') }}",
       '07': "{{ _('July') }}",
       '08': "{{ _('August') }}",
       '09': "{{ _('September') }}",
       '10': "{{ _('October') }}",
       '11': "{{ _('November') }}",
       '12': "{{ _('December') }}",
      },
      version: "{{ _('capture') }}",
      versions: "{{ _('captures') }}",
      result: "{{ _('result') }}",
      results: "{{ _('results') }}",
      viewAllCaptures: "{{ _('View All Captures') }}",
      dateTime: "{{ _('Date Time: ') }}",
    };

{% if not ui.vue_calendar_ui %}

  var renderCal = new RenderCalendar({ prefix: "{{ prefix }}", staticPrefix: "{{ static_prefix }}", text: text });
  renderCal.init();

{% else %}
  VueUI.main("{{ static_prefix }}", "{{ url }}", "{{ prefix }}", undefined, "{{ ui.logo }}", i18nStrings);

{% endif %}

</script>

{% endblock %}