{% load humanize %}
<div class="content block">
    <div id="hide-edit-readthrough-{{ readthrough.id }}">
        <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>
            {% endif %}
        </dl>
        <div class="field has-addons">
            <div class="control">
                {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Edit read dates" icon="pencil" controls_text="edit-readthrough" controls_uid=readthrough.id focus="edit-readthrough" %}
            </div>
            <div class="control">
                {% include 'snippets/toggle/toggle_button.html' with class="is-small" text="Delete these read dates" icon="x" controls_text="delete-readthrough" controls_uid=readthrough.id focus="modal-title-delete-readthrough" %}
            </div>
        </div>
    </div>
</div>

<div class="box hidden" id="edit-readthrough-{{ readthrough.id }}" tabindex="0">
    <h3 class="title is-5">Edit read dates</h3>
    <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/close_button.html' with text="Cancel" controls_text="edit-readthrough" controls_uid=readthrough.id %}
        </div>
    </form>
</div>
{% include 'snippets/delete_readthrough_modal.html' with controls_text="delete-readthrough" controls_uid=readthrough.id %}