moviewyrm/bookwyrm/templates/snippets/shelf_selector.html

<div class="dropdown">
    <div class="dropdown-trigger">
        <label for="shelf-select-dropdown-{{ book.id }}-toggle" role="button" aria-expanded="false" class="pulldown-menu" tabindex="0" aria-haspopup="true" aria-controls="shelf-select-{{ book.id }}">
            <div class="button">
                <span>Change shelf</span>
                <span class="icon icon-arrow-down" aria-hidden="true"></span>
            </div>
        </label>
    </div>
    <input type="checkbox" class="toggle-control" id="shelf-select-dropdown-{{ book.id }}-toggle">
    <div class="dropdown-menu toggle-content hidden" id="shelf-select-{{ book.id }}" role="menu">
        <ul class="dropdown-content">
            {% for shelf in request.user.shelf_set.all %}
            {% if shelf.identifier != current.identifier %}
            <li role="menuitem">
                <form class="dropdown-item pt-0 pb-0" name="shelve" action="/shelve/" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="book" value="{{ book.id }}">
                    <input type="hidden" name="shelf" value="{{ shelf.identifier }}">
                    <button class="button is-small" type="submit">{{ shelf.name }}</button>
                </form>
            </li>
            {% endif %}
            {% endfor %}
            <hr class="navbar-divider">
            <li>
                <form class="dropdown-item pt-0 pb-0" name="shelve" action="/unshelve/" method="post">
                    {% csrf_token %}
                    <input type="hidden" name="book" value="{{ book.id }}">
                    <input type="hidden" name="shelf" value="{{ current.id }}">
                    <button class="button is-small is-danger is-light" type="submit">Unshelve</button>
                </form>
            </li>
        </ul>
    </div>
</div>