{% extends "credentials/base_cred.html" %}

{% block title %}Your Badges | Credentials{% endblock %}

{% block meta_description %}
  The Canonical Ubuntu Essentials exams certify knowledge and verify skills in general Linux,
  Ubuntu Desktop, and Ubuntu Server topics.
{% endblock meta_description %}

{% block meta_copydoc %}
  https://docs.google.com/document/d/1QuhO-9FEOGLrYp8bErS_9snqdljl7d6tFAUoNQxoVDQ/edit
{% endblock
meta_copydoc %}

{% block content %}

  <section class="p-strip">
    <div class="row">
      <div class="col-12">
        <h1>Your badges</h1>
        <p>The table below shows the badges you have earned.</p>
      </div>
    </div>
    <div class="row">
      {% if badges['message'] %}
        <div class="col-8">
          <div class="p-notification--information">
            <div class="p-notification__content">
              <h5 class="p-notification__title">Information</h5>
              <p class="p-notification__message">{{ badges['message'] }}</p>
            </div>
          </div>
        </div>
      {% else %}
        <table aria-label="Badges earned">
          <thead>
            <tr>
              <th>Badge</th>
              <th>Exam</th>
              <th>Date of Issue</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% if badges and badges.length > 0 %}
              {% for badge in badges %}
                <tr>
                  <td>
                    <a href="{{ badge['badge_template']['url'] }}" target="_blank">
                      <img src="{{ badge['image_url'] }}"
                           alt="{{ badge['image']['id'] }}"
                           height="100"
                           width="100" />
                    </a>
                  </td>
                  <td>{{ badge["badge_template"]["name"] }}</td>
                  <td>{{ badge["issued_at_date"] }}</td>
                  {% if badge["state"]=="pending" %}
                    <td>
                      <a href="{{ badge['accept_badge_url'] }}" target="_blank">
                        <button class="p-button--positive">Accept Badge</button>
                      </a>
                    </td>
                  {% else %}
                    <td>
                      <a href="{{ badge['badge_template']['url'] }}" target="_blank">
                        <button class="p-button--positive">View Badge</button>
                      </a>
                    </td>
                  {% endif %}
                </tr>
              {% endfor %}
            {% else %}
              <caption>
                <div class="p-strip">
                  <div class="row">
                    <div class="u-align--right col-2 col-medium-2 col-small-1 col-start-large-4">
                      <img src="https://assets.ubuntu.com/v1/11b01c59-Security-orange-reverse.png"
                           alt="" />
                    </div>
                    <div class="u-align--left col-4 col-medium-4 col-small-3">
                      <p class="p-heading--4">You have no badges avaialble</p>
                      <p>Completing a examination to claim and share your badge.</p>
                      <a href="/credentials/shop" class="p-button--positive">Purchase an exam</a>
                    </div>
                  </div>
                </div>
              </caption>
            {% endif %}
          </tbody>
        </table>
      {% endif %}
    </div>
  </section>

{% endblock content %}