{% comment %}
    Either the chosen or unchosen div will be shown, depending on the presence
    of the 'blank' class on the container.

    Any element with the 'action-choose' class will open the page chooser modal
    when clicked.
{% endcomment %}

<div id="{{ attrs.id }}-chooser" class="chooser {% block chooser_class %}page-chooser{% endblock %} {% if not value %}blank{% endif %}" {% block chooser_attributes %}{% endblock %}>

    <div class="chosen">
        {% block chosen_state_view %}
            <span class="title">{{ display_title }}</span>
        {% endblock %}

        <ul class="actions">
            {% if not widget.is_required and widget.show_clear_link %}
                <li><button type="button" class="button action-clear button-small button-secondary">{{ widget.clear_choice_text }}</button></li>
            {% endif %}
            <li><button type="button" class="button action-choose button-small button-secondary">{{ widget.choose_another_text }}</button></li>
            {% if widget.show_edit_link %}
                <li>
                    {% block edit_link %}
                        <a href="{% block edit_chosen_item_url %}{{ edit_url }}{% endblock %}" class="edit-link button button-small button-secondary" target="_blank" rel="noopener noreferrer">{{ widget.link_to_chosen_text }}</a>
                    {% endblock %}
                </li>
            {% endif %}
        </ul>
    </div>

    <div class="unchosen">
        <button type="button" class="button action-choose button-small button-secondary">{{ widget.choose_one_text }}</button>
    </div>

</div>

{{ original_field_html }}
