{% macro icon_submit_link(form, icon, link_class, badge) %}
    <form action="{{ form.vars.action }}" method="POST">
        <a href="javascript:;" onclick="this.parentNode.submit()" class="{{ link_class|default('link_icon') }}">
            <i class="{{ icon }} fa-fw">
                {% if badge|default(0) > 0 %}
                    <span class="badge">{{ badge }}</span>
                {% endif %}
            </i>
        </a>
        {{ form_row(form._token) }}
    </form>
{% endmacro %}

{% macro modal_dialog(modal_id, title, message, button_text, onClickCode) %}
    <div id="{{ modal_id }}" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title text-left">{{ title }}</h4>
                </div>
                <div class="modal-body">
                    <p>{{ message|raw }}</p>
                </div>
                <div class="modal-footer">
                    {% if button_text is not empty %}
                        <button type="button" class="btn btn-sm btn-primary raised"
                                onclick="{{ onClickCode|default('') }}">{{ button_text }}</button>
                    {% endif %}
                    <button type="button" class="btn btn-sm btn-primary raised" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>
{% endmacro %}

{% macro editable_value(class, data_name, data_type, data_pk, data_value, data_title, data_url, data_source, select_value) %}
    <a href="#"
            {% if class|default('') != '' %} class="{{ class }}" {% endif %}
            {% if data_name|default('') != '' %} data-name="{{ data_name }}" {% endif %}
            {% if data_type|default('') != '' %} data-type="{{ data_type }}" {% endif %}
            {% if data_pk|default('') != '' %} data-pk="{{ data_pk }}" {% endif %}
            {% if data_value|default('') != '' %} data-value="{{ select_value|default(data_value) }}" {% endif %}
            {% if data_title|default('') != '' %} data-title="{{ data_title }}" {% endif %}
            {% if data_url|default('') != '' %} data-url="{{ data_url }}" {% endif %}
            {% if data_source|default('') != '' %} data-source="{{ data_source }}" {% endif %}
            {% if data_type|default('') == 'date' %} value="{{ data_value }}" {% endif %}
    >{{ data_value|default('(empty)') }}</a>
{% endmacro %}

{# Shows a QR Code #}
{% macro qrcode_data_uri(message, params) %}
    {% if params|default('') != '' %}
        <img src="{{ qrcode_data_uri(message, params) }}"/>
    {% else %}
        <img src="{{ qrcode_data_uri(message) }}"/>
    {% endif %}
{% endmacro %}

{# Shows a QR Code in a modal #}
{% macro qrcode_modal(modalId, qrCodeMessage, qrCodeParams) %}
    {% import _self as forms %}

    {% set title = 'QR Code' %}

    {% if modalId|default('') == '' %}
        {% set modalId = 'qrCodeModal' %}
    {% endif %}

    {% if qrCodeMessage|default('') == '' %}
        {% set message = '<div class="text-center">No QR Code.</div>' %}
    {% else %}
        {% set message = '<div class="text-center">'~ forms.qrcode_data_uri(qrCodeMessage|json_encode(constant('JSON_PRETTY_PRINT')), qrCodeParams) ~ '</div>' %}
    {% endif %}

    {{ forms.modal_dialog(modalId, title, message) }}
{% endmacro %}

{# Shows a date filter on a dropdown list #}
{% macro date_filter_dropdown(buttonText, listId, listUrl, dropdownUrl) %}
    {% if listId is not empty and listUrl is not empty and dropdownUrl is not empty %}
        <script type="text/javascript">
            $(document).ready(function () {
                $(function () {
                    window.vesselreport.datefilter.initFilter('{{ listId }}', '{{ listUrl }}', '{{ dropdownUrl }}');
                });
            });
        </script>

        <div class="dropdown" id="filterDropdown">
            <button id="filterDropdownButton" type="button" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false"
                    class="btn btn-sm btn-primary btn-allwidth raised dropdown-toggle"
                    data-toggle="tooltip" title="Filter by {{ buttonText|default('Filter by') }}">
                {{ buttonText|default('Filter by') }}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="filterDropdownButton">
            </ul>
        </div>
    {% endif %}
{% endmacro %}