{% extends "base.html" %}

{% load static %}

{% block subnav %}
  <div class="py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
    <a href="{% url 'review-process' %}" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Review Process</a>
    <a href="{% url 'review-request' %}" class="block md:inline">Submit Review</a>
    <a href="{% url 'review-upcoming' %}" class="block md:inline">Upcoming Reviews</a>
    <a href="{% url 'review-past' %}" class="block md:inline">Past Reviews</a>
  </div>
{% endblock %}

{% block content %}
  <div class="py-0 px-3 mb-3 md:py-6 md:px-0">

    <div class="items-center mb-6 space-x-3 md:flex md:mb-0 md:space-x-6">
      <div class="py-16 space-y-11 md:w-1/2">
        <h1 class="text-4xl">Formal Reviews are Vital</h1>
        <p>
          Boost libraries are selected for their relevance, high quality, and fitness for purpose. The review
          process ensures that only the best libraries with committed maintainers become part of the collection.
          Volunteers who write reviews are performing a vital service for the community. They are heroes!
        </p>
        <div class="mt-16">
          <a href="#" class="py-3 px-6 uppercase rounded-md border text-orange border-slate">Submit a review <small> > </small></a>
        </div>
      </div>
      <div id="reviewProcessAnim" class="md:w-1/2"></div>
    </div>

    <h2 class="block my-16 text-4xl text-center">How It Works</h2>

    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
      <div class="md:w-1/4">
        <img class="mx-auto"  src="{% static 'img/icons/graphic_determine-interest.svg' %}" alt="Determine Interest" />
      </div>
      <div class="space-y-6 md:w-3/4">
        <h3 class="text-2xl">1. Determine Interest</h3>
        <p>
          Make sure your library is suitable for the collection by proposing it to the Boost community in the forum.
          Existing authors will either endorse the library or explain why it is not appropriate or what might be
          needed to make it a good fit.
        </p>
      </div>
    </div>

    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
      <div class="md:w-1/4">
        <img class="mx-auto"  src="{% static 'img/icons/graphic_post-and-request-manager.svg' %}" alt="Post and Request a Manager" />
      </div>
      <div class="space-y-6 md:w-3/4">
        <h3 class="text-2xl">2. Post and Request a Manager</h3>
        <p>
          The Review Manager is the overseer for the review process of a library. To get the library on the schedule,
          a suitable manager should volunteer. Post your library to the mailing list to find a volunteer manager.
        </p>
      </div>
    </div>

    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
      <div class="md:w-1/4">
        <img class="mx-auto"  src="{% static 'img/icons/graphic_prepare-for-review.svg' %}" alt="Prepare for Review" />
      </div>
      <div class="space-y-6 md:w-3/4">
        <h3 class="text-2xl">3. Prepare for Review</h3>
        <p>
          The time between the library endorsement and the beginning of the review on the schedule is a great
          opportunity to make sure that the library <a href="#" class="text-orange">meets the requirements</a>,
          including documentation and build scripts. Before your formal review begins, double-, triple-, and
          quadruple-check your library. Verify that every code example works, that all unit tests pass on at least
          two compilers on at least two major operating systems, and run your documentation through a spelling and
          grammar checker.
        </p>
      </div>
    </div>

    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
      <div class="md:w-1/4">
        <img class="mx-auto" src="{% static 'img/icons/graphic_review-period.svg' %}" alt="Review Period" />
      </div>
      <div class="space-y-6 md:w-3/4">
        <h3 class="text-2xl">4. Review Period</h3>
        <p>
          For the two weeks after the review starts, engaged community members from the mailing list ask questions,
          make comments, and often get into arguments about your library. Finally when they are done, they write
          their summary containing their opinion of your library and, most importantly, whether to accept or reject it.
        </p>
      </div>
    </div>

    <div class="py-11 px-4 space-y-8 border-t md:flex border-slate">
      <div class="md:w-1/4">
        <img class="mx-auto"  src="{% static 'img/icons/graphic_accepted-or-rejected.svg' %}" alt="Accepted or Rejected" />
      </div>
      <div class="space-y-6 md:w-3/4">
        <h3 class="text-2xl">4. Accepted or Rejected</h3>
        <p>
          After the scheduled time has passed, the review manager retreats for a while to contemplate the results
          and issue a verdict on whether or not the library will be added to Boost.
        </p>
      </div>
    </div>

    <div class="py-5 px-3 my-4 rounded md:px-11 md:my-16 bg-charcoal">
      <div class="flex justify-between mb-6">
        <span class="inline py-1 px-3 w-auto text-lg uppercase rounded text-green bg-green/10">Recent reviews</span>
        <span class="inline px-2 w-auto uppercase text-orange">See All ></span>
      </div>
      <div class="py-11 sm:space-y-11 md:flex md:space-y-0 md:space-x-6 md:divide-x-2 divide-slate">
        <div class="pr-2 pb-6 border-b md:pl-6 md:border-0 last:border-0 border-slate">
          <h3 class="pb-3 text-2xl">Library Name Here</h3>
          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
          <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
        </div>
        <div class="pr-2 pb-6 border-b md:pl-6 md:border-0 last:border-0 border-slate">
          <h3 class="pb-3 text-2xl">Library Name Here</h3>
          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
          <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
        </div>
        <div class="pr-2 pb-6 border-b md:pl-6 md:border-0 last:border-0 border-slate">
          <h3 class="pb-3 text-2xl">Library Name Here</h3>
          <p class="py-5 text-lg">About the library.. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Sed posuere consectetur est at lobortis.</p>
          <div class="mt-3"><span class="mr-5">Authors</span> <img src="{% static 'img/fpo/user.png' %}" alt="user" class="inline" /></div>
        </div>
      </div>
    </div>

  </div>
{% endblock %}

{% block footer_js %}
  <script>
      var reviewProcessAnimParams = {
        container: document.getElementById('reviewProcessAnim'),
        path: '{% static "animations/Scene02/data.json" %}',
        renderer: 'svg',
        loop: true,
        autoplay: true,
        name: "Review Process",
      };
      anim = lottie.loadAnimation(reviewProcessAnimParams);
  </script>
{% endblock %}
