{% load wagtailcore_tags %}
{% wagtail_version as current_version %}

{% 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 %}{{ widget.classname }}{% endblock %} {% if is_empty %}blank{% endif %}" {% if choose_modal_url %}data-choose-modal-url="{{ choose_modal_url }}"{% endif %}>

    <div class="chosen">
        {% block chosen_icon %}
            <div class="chooser__preview" role="presentation">
                {% if current_version >= "4.2.0" %}
                    {% include "generic_chooser/widgets/icon_new.html" %}
                {% else %}
                    {% include "generic_chooser/widgets/icon_old.html" %}
                {% endif %}
            </div>
        {% endblock chosen_icon %}
        {% block chosen_state_view %}
            <div class="chooser__title" data-chooser-title>{{ title }}</div>
        {% endblock %}

        <ul class="chooser__actions">
            {% if not widget.is_required %}
                <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 class="edit-link-wrapper"><a {% if edit_item_url %}href="{{ edit_item_url }}"{% endif %} class="edit-link button button-small button-secondary" target="_blank" rel="noopener noreferrer">{{ widget.link_to_chosen_text }}</a></li>
            {% endif %}
            {% if widget.show_create_link and create_item_url %}
                <li><a href="{{ create_item_url }}" class="create-link button button-small button-secondary" target="_blank" rel="noopener noreferrer">{{ widget.link_to_create_text }}</a></li>
            {% endif %}
        </ul>
    </div>

    <div class="unchosen">
        <button type="button" class="button action-choose button-small button-secondary">{{ widget.choose_one_text }}</button>
        {% if widget.show_create_link and create_item_url %}
            <a href="{{ create_item_url }}" class="edit-link button button-small button-secondary" target="_blank" rel="noopener noreferrer">{{ widget.link_to_create_text }}</a>
        {% endif %}
    </div>

</div>

{{ original_field_html }}
