{% block content %}
<div class="foreground"></div>
<div class="foregroundContent">
    <div data-aos="fade-up">
      <h2 class="concentratedHead">Projects</h2>
      <p>
        Project status is indicated by the color of the project card:
        <br />
        <span class="complete">⬤</span> - Complete
        <br />
        <span class="WIP">⬤</span> - Work In Progress
        <br />
        <span class="incomplete">⬤</span> - Incomplete
      </p>
    </div>

    <!-- >
    <div class="checkbox-wrapper">
      <div class="flex start">
      <label class="switch" htmlFor="pinned">
        <input type="checkbox" id="pinned" onClick="toggleCheckbox('')" checked/>
        <div class="slider round"></div>
        <strong>Pinned</strong>
      </label>
      </div>
      <div class="flex start">
      <label class="switch" htmlFor="programming">
        <input type="checkbox" id="programming" onClick="toggleCheckbox('')" />
        <div class="slider round"></div>
        <strong>Programming</strong>
      </label>
      </div>
      <div class="flex start">
      <label class="switch" htmlFor="geospacial" onClick="toggleCheckbox('')">
        <input type="checkbox" id="geospacial" />
        <div class="slider round"></div>
        <strong>Geospacial</strong>
      </label>
      </div>
    </div>
    </!-->
    <div class="projectList checkbox-client">
        {% from 'partials/project.html' import project %} 
        {% for i in var["projects"] %}
        {{ project(i, var["projects"][i]["classes"], var["projects"][i]["status"], var["projects"][i]["bgi"], var["projects"][i]["content"], var["projects"][i]["links"]) }}
        {% endfor %}
    </div>
  </div>


  <!--><script>toggleCheckbox('')</script></!-->
{% endblock %}