{% extends "base.dj.html" %}

{% block content %}
  <div class="d-flex flex-wrap justify-content-between">
    <p>You have been issued the following Claremont MakerSpace Member Certifications:</p>
    <div class="form-check form-switch">
      <label class="form-check-label" for="flexSwitchCheckDefault">
        <input class="form-check-input" type="checkbox" role="switch" {{ show_outdated|yesno:"checked," }} onchange="window.location.href='?show_outdated={{ show_outdated|yesno:"false,true" }}'">
        Show Outdated
      </label>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-bordered table-striped table-hover" border="1">
      <thead>
        <tr>
          <th>Certification</th>
          <th>Version</th>
          <th>Department</th>
          <th>Certified By</th>
          <th>Date</th>
        </tr>
      </thead>
      <tbody>
        {% for certification in certifications %}
          {% with current=certification.certification_version.is_current %}
            {% if current or show_outdated %}
              <tr {% if not current %}class="table-warning"{% endif %}>
                <td {% if not current %}class="text-decoration-line-through"{% endif %}>
                  {{ certification.certification_version.definition.name }}
                </td>
                <td>
                  {{ certification.certification_version.semantic_version }}
                  {% if not current %}<span class="fw-bold">OUTDATED</span>{% endif %}
                </td>
                <td>{{ certification.certification_version.definition.department }}</td>
                <td>{{ certification.certified_by }}</td>
                <td>{{ certification.date }}</td>
              </tr>
            {% endif %}
          {% endwith %}
        {% endfor %}
      </tbody>
    </table>
  </div>
{% endblock %}