{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Cashier Tutorial Videos{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/cashier_tutorial_videos.css">
{% endblock %}
{% block content %}
<div class="wrap">
    <p><a href="/cashiers">&larr; Back to Cashiers</a></p>
    <h2>Cashier Tutorial Videos</h2>
    {% if videos %}
        {% for video in videos %}
        <div class="card">
            <h3 class="title">{{ video[1] }}</h3>
            <div class="meta">Posted {{ video[4] }}</div>
            {% if video[3] %}<p>{{ video[3] }}</p>{% endif %}
            <a class="btn" href="{{ video[2] }}" target="_blank" rel="noopener">Watch Video</a>
        </div>
        {% endfor %}
    {% else %}
        <div class="card">
            <p>No tutorial videos available yet. Server admin can post update tutorials.</p>
        </div>
    {% endif %}
</div>
{% endblock %}