{% load humanize %}
<div class="content block">
    <input class="toggle-control" type="radio" name="show-edit-readthrough-{{ readthrough.id }}" id="show-readthrough-{{ readthrough.id }}" checked>
    <div class="toggle-content hidden">
        <dl class="mb-1">
            {% if readthrough.start_date %}
            <div class="is-flex">
                <dt>Started reading:</dt>
                <dd>{{ readthrough.start_date | naturalday }}</dd>
            </div>
            {% endif %}
            {% if readthrough.finish_date %}
            <div class="is-flex">
                <dt>Finished reading:</dt>
                <dd>{{ readthrough.finish_date | naturalday }}</dd>
            </div>
            {% elif readthrough.progress %}
            <div class="is-flex">
                <dt>Progress:</dt>
                {% if readthrough.progress_mode == 'PG' %}
                <dd>on page {{ readthrough.progress }} of {{ book.pages }}</dd>
                {% else %}
                <dd>{{ readthrough.progress }}%</dd>
                {% endif %}
            </div>
            {% endif %}
        </dl>
        <div class="field is-grouped">
            {% include 'snippets/toggle/toggle_button.html' with small=True text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id %}
            {% include 'snippets/toggle/toggle_button.html' with small=True text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id %}
        </div>
        {% if show_progress %}
        Progress Updates:
        <ul>
            {% if readthrough.finish_date %}
            <li>{{ readthrough.start_date | naturalday }}: finished</li>
            {% endif %}
            {% 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' %}
                    page {{ progress_update.progress }} of {{ 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">
                            <span class="is-sr-only">Delete this progress update</span>
                        </span>
                    </button>
                </form>
            </li>
            {% endfor %}
            <li>{{ readthrough.start_date | naturalday }}: started</li>
        </ul>
        {% elif readthrough.progress_updates|length %}
        <a href="?showprogress">Show {{ readthrough.progress_updates|length }} Progress Updates</a>
        {% endif %}
    </div>
</div>

<div class="block">
    <input class="toggle-control" type="radio" name="show-edit-readthrough-{{ readthrough.id }}" id="edit-readthrough-{{ readthrough.id }}">
    <div class="toggle-content hidden">
        <div class="box">
            <form name="edit-readthrough" action="/edit-readthrough" method="post">
                {% include 'snippets/readthrough_form.html' with readthrough=readthrough %}
                <div class="field is-grouped">
                    <button class="button is-primary" type="submit">Save</button>
                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="show-readthrough" controls_uid=readthrough.id %}
                </div>
            </form>
        </div>
    </div>
</div>

<div>
    <input class="toggle-control" type="checkbox" name="delete-readthrough-{{ readthrough.id }}" id="delete-readthrough-{{ readthrough.id }}">
    <div class="modal toggle-content hidden">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">Delete this read-though?</p>
                <label class="delete" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
            </header>
            <footer class="modal-card-foot">
                <form name="delete-readthrough-{{ readthrough.id }}" action="/delete-readthrough" method="POST">
                    {% csrf_token %}
                    <input type="hidden" name="id" value="{{ readthrough.id }}">
                    <button class="button is-danger is-light" type="submit">
                        Delete
                    </button>
                    {% include 'snippets/toggle/toggle_button.html' with text="Cancel" controls_text="delete-readthrough" controls_uid=readthrough.id %}
                </form>
            </footer>
        </div>
        <label class="modal-close is-large" for="delete-readthrough-{{ readthrough.id }}" aria-label="close"></label>
    </div>
</div>