{% load i18n %}
{% load humanize %}
{% load tz %}
{% load utilities %}
<div class="content">
    <div class="box is-shadowless has-background-tertiary">
        <div class="columns">
            <div class="column">
                {% trans "Progress Updates:" %}
                <ul>
                    {% if readthrough.finish_date or readthrough.progress %}
                    <li>
                        {% if readthrough.finish_date %}
                            {{ readthrough.finish_date | localtime | naturalday }}: {% trans "finished" %}
                        {% else %}

                            {% if readthrough.progress_mode == 'PG' %}
                                {% include 'snippets/page_text.html' with page=readthrough.progress total_pages=book.pages %}
                            {% else %}
                                {{ readthrough.progress }}%
                            {% endif %}
                        {% endif %}

                        {% if readthrough.progress %}
                        {% trans "Show all updates" as button_text %}
                        {% include 'snippets/toggle/toggle_button.html' with text=button_text controls_text="updates" controls_uid=readthrough.id class="is-small" %}
                        <ul id="updates_{{ readthrough.id }}" class="is-hidden">
                            {% for progress_update in readthrough.progress_updates %}
                            <li>
                                <form name="delete-update" action="/delete-progressupdate" method="POST">
                                    {% csrf_token %}
                                    {{ progress_update.created_date | naturalday }}:
                                    {% if progress_update.mode == 'PG' %}
                                    {% include 'snippets/page_text.html' with page=progress_update.progress total_pages=book.pages %}
                                    {% else %}
                                    {{ progress_update.progress }}%
                                    {% endif %}
                                    <input type="hidden" name="id" value="{{ progress_update.id }}"/>
                                    <button type="submit" class="button is-small" for="delete_progressupdate_{{ progress_update.id }}" role="button" tabindex="0">
                                        <span class="icon icon-x" title="Delete this progress update">
                                            <span class="is-sr-only">{% trans "Delete this progress update" %}</span>
                                        </span>
                                    </button>
                                </form>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </li>
                    {% endif %}

                    {% if readthrough.start_date %}
                    <li>{{ readthrough.start_date | localtime | naturalday }}: {% trans "started" %}</li>
                    {% endif %}
                </ul>
            </div>
            <div class="column is-narrow">
                <div class="field has-addons">
                    <div class="control">
                        {% trans "Edit read dates" as button_text %}
                        <button class="button is-small" type="button" data-modal-open="edit_readthrough_{{ readthrough.id }}">
                            <span class="icon icon-pencil" title="{{ button_text }}">
                                <span class="is-sr-only">{{ button_text }}</span>
                            </span>
                        </button>
                    </div>
                    <div class="control">
                        {% trans "Delete these read dates" as button_text %}
                        <button class="button is-small" type="button" data-modal-open="delete_readthrough_{{ readthrough.id }}">
                            <span class="icon icon-x" title="{{ button_text }}">
                                <span class="is-sr-only">{{ button_text }}</span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% join "edit_readthrough" readthrough.id as edit_modal_id %}
{% include "readthrough/readthrough_modal.html" with readthrough=readthrough id=edit_modal_id %}
{% join "delete_readthrough" readthrough.id as delete_modal_id %}
{% include 'readthrough/delete_readthrough_modal.html' with id=delete_modal_id %}