{% extends "base.html" %}
{% block title %}Stories{% endblock title %}
{% block content %}
<h2>My Stories</h2>
<p class="works-description">
Despite my linguistic difficulties to express myself, my love for story telling is present in a few mediums. Most of my writings are German and somewhere on the fantasy-magical realism spectrum. Feedback and criticism is welcomed!
</p>
<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 | sort(attribute="last_update") | reverse %}
        <a href="./stories/{{ work.path_to_document | replace(from='pdf', to='html') }}" class="work-card card">
            <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>
                <span>Last Update: {{work.last_update}}</span>
            </div>
        </a>
    {% endfor %}
</div>
{% endblock content %}
{% block jsfile %}<script src="./stories.js"></script>{% endblock jsfile %}