{% load bootstrap3 %}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">


<div class="maced modal" id="{{ action_type }}-{{ item_name }}-modal" data-backdrop="static" data-keyboard="false"
    aria-labelledby="{{ action_type }}-{{ item_name }}-modal-label" aria-hidden="true">
    <div class="maced modal-dialog" style="width: 1200px;">
        <div class="maced modal-content">
            <div class="maced modal-header">
                <button type="button" class="maced close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 class="maced" id="{{ action_type }}-{{ item_name }}-modal-label">{{ action_type|title }} {{ item_html_name }}</h3>
            </div>

            <div class="maced modal-body">
                <div class="maced" id="{{ action_type }}-{{ item_name }}-spinner" style="display: none; text-align: center">
                    <i class="maced fa fa-spinner fa-pulse fa-3x"></i>
                </div>

                <div class="maced" id="{{ action_type }}-{{ item_name }}-error-div" style="display: none; text-align: center; color: Red">
                </div>

                <table class="maced table">
                    {{ item_html_code|safe }}
                </table>
            </div>

            <div class="maced modal-footer">
                <span class="pull-left">
                    <b> Note: If you close this, changes will stay but will not be saved. </b>
                </span>

                <div class="maced pull-right">
                    <button type="button" class="maced btn btn-success" id="{{ action_type }}-{{ item_name }}-confirmation-button"
                        onclick="{{ action_type }}_item('{{ item_name }}');" aria-hidden="true">
                        {% bootstrap_icon "ok" %} Accept
                    </button>

                    <button class="maced btn btn-warning" id="{{ action_type }}-{{ item_name }}-declination-button"
                        data-dismiss="modal" aria-hidden="true">
                        {% bootstrap_icon "ban-circle" %} Close
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>