{% load admin_tags %}
<!--<div class="modal fade" id="{{type}}-{{ op }}" data-type="{{ op }}" data-backdrop="static" data-keyboard="false">-->
<div class="modal fade" data-item ={{ action.target }} id="{{action.target}}-{{ op }}" data-backdrop="static" data-keyboard="true" tabindex="-1" data-karma={{ action.karma }} data-caution={{ action.caution_level }} data-type={{ op }}>
    <div class="modal-dialog {% if op == 'modify_email' and view_type == 'list' %} modal-lg {% else %} modal-md {% endif %}">
        <div class="modal-content area">
            <div class="modal-header">
                <a class="close cancel" data-dismiss="modal">×</a>
                <h3 class="elem">{{ action.name|safe }}</h3>
            </div>
            <div class="modal-body">
                {% if op == "contact" %}
                    <div class="form-sender form-area">
                        <label>From:</label>
                        <input type="text" name="sender" class="sender"
                        form="contactForm" value="{{mail.sender}}" />
                        <a data-error="empty-sender" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Missing the sender address of the e&#8209mail."></a>
                        <a data-error="invalid-email" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Invalid e&#8209mail address."></a>
                    </div>
                    </br>
                    <div class="form-subject form-area">
                        <label>Subject:</label>
                        <input type="text" name="subject" class="subject"
                        form="contactForm" value="{{mail.subject}}" />
                        <a data-error="empty-subject" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Missing the subject of the e&#8209mail."></a>
                    </div>
                    <div class="form-body form-area">
                        <label>Body:</label>
                        <textarea name="text" form="contactForm" class="email-content body">{{ mail.body }}</textarea>
                        <a data-error="empty-body"  data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" rel="tooltip" data-content="Missing the body of the e&#8209;mail."></a>
                        <div class="extra-info">
                            <a href="" class="snf-info instructions-icon" data-container="#{{action.target}}-{{ op }}" data-toggle="popover" data-html="true" data-placement="right" data-content="
                            <h2>Legend</h2>
                            <dl class='dl-horizontal'>
                                {% for name, attr in mail.legend.items %}
                                    <dt>{{ name }}: </dt><dd>{{ attr }}</dt>
                                    {% endfor %}
                            </dl>"></a>
                            <!-- place here the msg for duplicates -->
                        </div>
                    </div>
                {% endif %}
                {# If we are in a details view, then the number of items is just one, so we can get rid of the plural #}
                <div class="summary">
                    <p>You have chosen to <em class="elem lowercase">{{ action.name|safe }}</em>
                    {% if op == "contact" %}
                        to 
                    {% elif op == "modify_email" %}
                        for
                    {% endif %}
                    the following <em class="num elem"></em> {{ action.target }}{% if view_type == 'list' %}s{% endif %}:
                        <a data-error="no-selected" data-toggle="popover" data-trigger="hover" class="error-sign snf-exclamation-sign" href="#" data-content="There are no selected items to complete this action." rel="tooltip"></a>
                    </p>
                    {% if view_type == "list" %}
                    <table class="table-selected table table-bordered">
                        <tbody>
                        </tbody>
                    </table>
                    <button class= "custom-btn toggle-more closed" data-karma="dark"><span>Show All</span></button>
                    {% endif %}
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="custom-btn cancel" data-dismiss="modal"><span>Cancel</span></a>
                <a  href="#" data-url={% url admin-actions %} data-op={{ op }} data-ids="" data-target={{ action.target }} class="custom-btn apply-action" data-karma={{ action.karma }} data-caution={{ action.caution_level }} data-keys="{{ action.data_keys|safe }}" data-dismiss="modal"><span>{{ action.name|safe }}</span></a>
            </div>
        </div>
    </div>
</div>