{% extends "templates/base.html" %}
{% block title %}
    {{ _("Assignment List") }}
{% endblock %}

{% block content %}
<main class="common-page-style">
    <div class="container">
        {{ Header() }}
        {% if assignments | length %}
        {{ AssignmentList(assignments) }}
        {% else %}
        {{ EmptyState() }}
        {% endif %}
    </div>
</main>
{% endblock %}

{% macro Header() %}
<header class="sticky">
    <div class="edit-header">
        <div class="page-title">
            {{ _("Assignment List") }}
        </div>

        <a class="btn btn-primary btn-sm align-self-center" href="/assignments/new-assignments">
            {{ _("Add Assignment") }}
        </a>
    </div>
</header>
{% endmacro %}

{% macro AssignmentList(assignments) %}
<div class="mt-5">
    <div class="form-grid">
		<div class="grid-heading-row">
			<div class="grid-row">
				<div class="data-row row">
					<div class="col grid-static-col">
						{{ _("Title") }}
					</div>
					<div class="col grid-static-col col-xs-3">
						{{ _("Type") }}
					</div>
				</div>
			</div>
		</div>
		{% for assignment in assignments %}
		<div class="grid-row">
			<div class="data-row row">
				<a class="col grid-static-col button-links clickable" href="/assignments/{{ assignment.name }}">
					{{ assignment.title }}
				</a>
				<div class="col grid-static-col col-xs-3">
					{{ assignment.type }}
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
    <!-- <ul class="list-unstyled">
       {% for assignment in assignments %}
       <li class="list-row">
            <a class="clickable" href="/assignments/{{ assignment.name }}">
                <span>
                    {{ loop.index }}.
                </span>
                <span>
                    {{ assignment.title }}
                </span>
            </a>
        </li>
    {% endfor %}
    </ul> -->
</div>
{% endmacro %}

{% macro EmptyState() %}
<div class="empty-state mt-5">
    <img class="icon icon-xl" src="/assets/lms/icons/comment.svg">
    <div class="empty-state-text">
        <div class="empty-state-heading">
            {{ _("You have not created any assignment yet.") }}
        </div>
        <div class="course-meta ">
            {{ _("Create an assignment and evaluate your students.") }}
        </div>
    </div>
</div>
{% endmacro %}