{% extends "base.html" %}
{% block title %}Stories{% endblock title %}
{% block content %}
<div class="works-filter">
    <form>
        <label for="language-select">Language: </label>
        <select name="language" id="language-select">
            <option value="*">All</option>
            {% for work in works | unique(attribute="language") %}
            <option value="{{work.language}}">{{work.language}}</option>
            {% endfor %}
        </select>
    </form>
</div>
<div class="works">
    {% for work in works %}
        <a href="{{work.path_to_document}}" class="work-card" download>
            <div class="title-and-description">
                <h3>{{work.title}}</h3>
                <p>{{work.description}}</p>
            </div>
            <div class="info">
                <span>{{work.number_of_pages}} Pages</span>
                <span class="story-language">{{work.language}}</span>
            </div>
        </a>
    {% endfor %}
</div>
{% endblock content %}
{% block jsfile %}<script src="./stories.js"></script>{% endblock jsfile %}