{% extends "base.html" %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/short_stories.css') }}">
<div id="index">
    <!--list of links to different stories on the page-->
    <div id="links">
        <ul>
            {% for s in stories %}
            <!--loop.index is a special value in jinja2 for loops-->
            <!--using | casts a variable to a new type-->
            <li><a href="{{ url_for('short_stories', story=loop.index, _anchor='story'+loop.index|string) }}">{{s.chapter | capitalize}} {{s.title}}</a></li>
            {% endfor %}
        </ul>
    </div>
</div>
<div>
    {% if story == 1%}
        <a href="{{ url_for('short_stories', story=1, _anchor='story1') }}">Previous</a></li>
    {% else -%}
        <a href="{{ url_for('short_stories', story=story-1, _anchor='story'+(story-1)|string) }}">Previous</a></li>
    {% endif %}

    {% if story == stories|length%}
        <a href="{{ url_for('short_stories', story=stories|length, _anchor='story'+stories| length|string) }}" style="float: right;">Next</a></li>
    {% else -%}
        <a href="{{ url_for('short_stories', story=story+1, _anchor='story'+(story+1)|string) }}" style="float: right;">Next</a></li>
    {% endif %}

</div>
{% block story %}{% endblock %}
<div>
    {% if story == 1%}
        <a href="{{ url_for('short_stories', story=1, _anchor='story1') }}">Previous</a></li>
    {% else -%}
        <a href="{{ url_for('short_stories', story=story-1, _anchor='story'+(story-1)|string) }}">Previous</a></li>
    {% endif %}

    {% if story == stories|length%}
        <a href="{{ url_for('short_stories', story=stories|length, _anchor='story'+stories| length|string) }}" style="float: right;">Next</a></li>
    {% else -%}
        <a href="{{ url_for('short_stories', story=story+1, _anchor='story'+(story+1)|string) }}" style="float: right;">Next</a></li>
    {% endif %}
</div>
{% endblock %}