{% extends "base.html" %}

{% block title %}
  {{__('Build Report')}}
{% endblock %}

{% block stylesheetOverride %}
<link rel="stylesheet" media="screen" href="/static/stylesheets/build-report/vendor.chunk.css">
<link rel="stylesheet" media="screen" href="/static/stylesheets/build-report/main.chunk.css">
{% endblock %}

{% block content %}
<noscript>{{__('You need to enable JavaScript to run this app.')}}</noscript>

<div class="container px-16 min-h-body table w-full">

  <div class="table-row">
    <h1 class="text-6xl text-edsgreen mb-4">{{__('Build Your Own Report')}}</h1>
  </div>

  <div class="flex flex-col lg:flex-row">

    <div class="w-full lg:w-9/12 lg:pr-10">
      <div id="root" class="w-full" data-api-url="{{ dataApiUrl }}">
        <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
      </div>
    </div>

    <div class="w-full lg:w-5/12">
      <h2 class="text-3xl text-edsgreen block">{{ __('Meta Data') }}</h2>

      <!-- Form -->
      <form action="/metastore" method="GET" id="dictionary-form">
        <div class="relative mb-10 mt-10">
          <input type="text" class="border-2 border-solid border-gray-200 py-4 pl-4 pr-20 text-xl outline-none focus:border-secondary w-full" placeholder="{{__('Search...')}}" name="q" autofocus>

          <button class="absolute inset-y-0 right-0 w-16 px-4 text-secondary fill-current" type="submit" aria-label="Submit">
            <i class="fa fa-search text-edsgreen" aria-hidden="true"></i>
          </button>
        </div>
      </form>
      <!-- End of Form -->

      <ul>
        <div id="dictionary-results">

        </div>
      </ul>

    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script type='text/javascript'>

    /* attach a submit handler to the form */
    $("#dictionary-form").submit(function(event) {
      // Remove previous results
      $('.search-results').remove();

      /* stop form from submitting normally */
      event.preventDefault();

      /* get the action attribute from the <form action=""> element */
      var $form = $( this ),
          url = $form.attr( 'action' );

      // Run the spinner
      var spinner = '<div class="lds-roller" id="spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>';
      $form.append(spinner);

      var $query = "*" + $('input[name$="q"]').val() + "*";

      /* Get the data */
      var dictionaryResults = $('#dictionary-results');
      $.get( url, { q: $query }, function( data ) {
        // Stop the spinner
        $('#spinner').remove();

        if (data.total === 0) {
          var element = `<p class="search-results">
            No results.
            </p>`;
          dictionaryResults.append(element);
        }
        data.results.forEach(item => {
          var element = `
          <li class="mt-10 search-results">
            <div>
              <h3 class="text-2xl text-primary font-semibold">
                ${item.title || item.name}
              </h3>
              <span class="text-gray-500 block mt-1">
                ${item.organization ? item.organization.name : ''}
              </span>
              <div class="leading-relaxed mt-2">
                <p>
                  ${item.description}
                </p>
                <p>
                  ${item.comment}
                </p>

                ${item.example ? '<p><span class="font-semibold">Example:</span> ' + item.example + '</p>' : ''}

                ${item.unit ? '<p><span class="font-semibold">Unit:</span> ' + item.unit + '</p>' : ''}

              </div>
            </div>
          </li>
          `;
          dictionaryResults.append(element);
        })
      });
    });
</script>

<script src="/static/js/build-report/runtime~main.js"></script>
<script src="/static/js/build-report/vendor.chunk.js"></script>
<script src="/static/js/build-report/main.chunk.js"></script>
{% endblock %}