<?php
/*
 * Template Name: Courses static
 *
 */

get_header("static");
?>
<main>

  <section class="module-list">
    <div class="container">
      <div class="text-gradient__wrap text-gradient__wrap--left">
        <h1 class="h2 module-list__title text-gradient">Neque neque non tortor</h1>
      </div>
      <h2 class="module-list__text">Eu massa in lobortis volutpat. Consequat, quam porttitor.</h2>
      <div class="row">
        <!-- Note to WP Dev: These boxes differ in a few ways from the courses found in homepage since they're not a course, but a "folder" for multiple courses, so no video overlay etc and the btn has a different wrapper (mind the added class course-box--alt) -->
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box course-box--alt">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-1.jpg" alt="" />
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Module numero uno</h2>
              <p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment.</p>
              <div class="btn-center">
                <a href="#" class="btn btn--gradient-small">See all courses</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box course-box--alt">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-2.jpg" alt="" />
                <div class="course-box__label">
                  <span>new</span>
                </div>
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Module name</h2>
              <p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment. More text to check height of elements etc etc. Should be equal height</p>
              <div class="btn-center">
                <a href="#" class="btn btn--gradient-small">See all courses</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box course-box--alt">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-3.jpg" alt="" />
                <div class="course-box__label">
                  <span>new</span>
                </div>
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Module name</h2>
              <p>Become more aware of hazards.</p>
              <div class="btn-center">
                <a href="#" class="btn btn--gradient-small">See all courses</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box course-box--alt">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-1.jpg" alt="" />
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Module numero uno</h2>
              <p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment.</p>
              <div class="btn-center">
                <a href="#" class="btn btn--gradient-small">See all courses</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box course-box--alt">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-2.jpg" alt="" />
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Module name</h2>
              <p>Become more aware of hazards and practice response protocols for hazardous situations in a safe environment. More text to check height of elements etc etc. Should be equal height</p>
              <div class="btn-center">
                <a href="#" class="btn btn--gradient-small">See all courses</a>
              </div>
            </div>
          </article>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
          <article class="course-box course-box--alt">
            <div class="course-box__header">
              <div class="course-box__img-wrap">
                <img class="course-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-3.jpg" alt="" />
                <div class="course-box__label">
                  <span>new</span>
                </div>
              </div>
            </div>
            <div class="course-box__content">
              <h2 class="h4 course-box__title">Module name</h2>
              <p>Become more aware of hazards.</p>
              <div class="btn-center">
                <a href="#" class="btn btn--gradient-small">See all courses</a>
              </div>
            </div>
          </article>
        </div>
      </div>
      <!-- According to the designer, pagination should always show only the three closest pages..so active page  and +1 / -1 on that.
      The active page is centered unless it's the first or last page, in which case there will still be three pages shown, but the active page (being the first or last one) won't be centered -->
      <div class="pagination">
        <a href="#" class="previous">
          <svg class="icon-small-arrow-left"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-small-arrow-left"></use></svg>
        </a>
        <a href="#" class="page">1</a>
        <a href="#" class="page active">2</a>
        <a href="#" class="page">3</a>
        <a href="#" class="previous">
          <svg class="icon-small-arrow-right"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-small-arrow-right"></use></svg>
        </a>
      </div>
    </div>
  </section>

</main>

<?php

get_footer("static");

?>