<table class="table table-sm table-striped">
    <tr>
        <th>Name</th>
        <th>Qualification</th>
        <th>Training For</th>
        <th>Membership Issue</th>
    </tr>
    {% for trainee in trainees %}
        <tr>
            <td><a href="{% url 'xsd_training:TraineeNotes' trainee.pk %}">{{ trainee.get_full_name }}</a></td>
            <td>
                <i class="fa fa-square xsd-qual-fg--{{ trainee.top_qual.code }}" aria-hidden="true"></i>
                {{ trainee.top_qual }}
            </td>
            <td>
                <i class="fa fa-square xsd-qual-fg--{{ trainee.training_for.code }}" aria-hidden="true"></i>
                {{ trainee.training_for }}
            </td>
            <td>
                <form action="action/remove/" method="POST">
                    {% csrf_token %}
                    <input type="hidden" name="names" value="{{ trainee.pk }}" />
                    <button type="submit" class="btn btn-outline-danger btn-mini pull-right">
                        <i class="fa fa-remove"></i>
                    </button>
                </form>
                {% if trainee.membership_problem %}
                    <div class="popover-button error" data-title="Problems With Membership"
                         data-content="{{ trainee.first_name }}'s {% if trainee.no_expiry_data %}has not got any forms with the club, probably a new member {% elif trainee.bsac_expired %}BSAC membership has expired, {% elif trainee.club_expired %}club membership has expired, {% elif trainee.club_expired %}medical form has expired.{% endif %}"
                         data-trigger="hover" data-placement="top">Yes
                    </div>
                {% endif %}
            </td>
        </tr>
    {% endfor %}
</table>
