{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container comic_box">
<center>
<br/>
    {% if nav.q_next_to_directory %}
        <a href="/comic/{{ nav.next_path }}/">
    {% else %}
        <a href="/comic/read/{{ nav.next_path }}/{{ nav.next_index }}/">
    {% endif %}
        <img src="/comic/read/{{ nav.cur_path }}/{{ nav.cur_index }}/img" class="img-responsive">
    </a>
<br/>
<div class="btn-group">
    {% if nav.q_prev_to_directory %}
        {% if nav.prev_path %}
            <a href="/comic/{{ nav.prev_path }}/" class="btn btn-default">Next</a>
        {% else %}
            <a href="/comic/" class="btn btn-default">Next</a>
        {% endif %}
    {% else %}
        <a href="/comic/read/{{ nav.prev_path }}/{{ nav.prev_index }}/" class="btn btn-default">Prev</a>
    {% endif %}
    {% if book.pages %}
        <div class="btn-group dropup">
            <button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle ">{{ orig_file_name }}<span class="caret"></span></button>
            <ul class="dropdown-menu" id="dropdown-list">
                {% for file in book.pages %}
                    <li><a href="/comic/read/{{ nav.cur_path }}/{{ file.index }}/">{{ file.page_file_name }}</a></li>
                {% endfor %}
            </ul>
        </div>
    {% else %}
        <button class="btn btn-default">No Pages</button>
    {% endif %}
    {% if nav.q_next_to_directory %}
        {% if nav.next_path %}
            <a href="/comic/{{ nav.next_path }}/" class="btn btn-default">Next</a>
        {% else %}
            <a href="/comic/" class="btn btn-default">Next</a>
        {% endif %}
    {% else %}
        <a href="/comic/read/{{ nav.next_path }}/{{ nav.next_index }}/" class="btn btn-default">Next</a>
    {% endif %}
</div>
</center>
</div>
{% endblock %}