{% macro disabled(name, title, value, helpText, groupClass) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}">{{ title }}</label>
        <input readonly class="form-control" value="{{ value }}"></input>
    </div>
{% endmacro %}

{% macro hidden(name, value) %}
    <input name="{{ name }}" type="hidden" id="{{ name }}" value="{{ value }}" />
{% endmacro %}

{% macro raw(text, groupClass) %}
    <div class="{{ groupClass }}">
        {{ text|raw }}
    </div>
{% endmacro %}

{% macro message(message, groupClass, messageStyleClass) %}
    <div class="{% if messageStyleClass %}{{messageStyleClass}}{% endif %} mr-1 {{ groupClass }}">
        <span>{{ message }}</span>
    </div>
{% endmacro %}

{% macro alert(message, alertType, groupClass) %}
    <div class="row">
        <div class="mr-3 alert alert-{% if alertType %}{{alertType}}{% else %}primary{% endif %} {{ groupClass }}" role="alert">{{ message }}</div>
    </div>
{% endmacro %}

{% macro button(title, type, link, groupClass) %}
    <div class="form-group {{ groupClass }}">
        {% if type == "link" %}
            <a class="btn btn-white xibo-inline-btn mr-1 ml-0" href="{{ link }}">{{ title }}</a>
        {% else %}
            <button class="btn btn-white xibo-inline-btn mr-1 ml-0" type="{{ type }}">{{ title }}</button>
        {% endif %}
    </div>
{% endmacro %}

{% macro input(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" {{ validation }} />
    </div>
{% endmacro %}

{% macro inputWithTags(name, title, value, helpText, groupClass, validation, accessKey, exactTag, exactTagTitle, logicalOperatorTitle, autoCompleteEnabled = 1) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        {% if exactTag %}
            <div class="input-group input-group-tags-exact">
                <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" data-role="tagsInputInline" {% if autoCompleteEnabled == 1 %} data-auto-complete-url="{{ url_for('tag.search') }}?allTags=1" {% endif %}  {{ validation }} />
                <div class="input-group-append input-group-addon">
                    <div class="input-group-text">
                        <input title="{{ exactTagTitle }}" type="checkbox" id="{{ exactTag }}" name="{{ exactTag }}">
                    </div>
                    <select class="custom-select" id="logicalOperator" name="logicalOperator" title="{{ logicalOperatorTitle }}" style="min-width:auto!important">
                        <option value="OR" selected>OR</option>
                        <option value="AND">AND</option>
                    </select>
                </div>
            </div>
        {% else %}
            <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" data-role="tagsInputInline" {% if autoCompleteEnabled == 1 %} data-auto-complete-url="{{ url_for('tag.search') }}?allTags=1" {% endif %}  {{ validation }} />
        {% endif %}
    </div>
{% endmacro %}

{% macro number(name, title, value, helpText, groupClass, validation, accessKey, maxNumber, minNumber) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <input class="form-control" name="{{ name }}" {% if maxNumber %}max="{{maxNumber}}" {% endif %}{% if minNumber %}min="{{minNumber}}" {% endif %}type="number" id="{{ name }}" value="{{ value }}" {{ validation }} />
    </div>
{% endmacro %}

{% macro email(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <input class="form-control" name="{{ name }}" type="email" id="{{ name }}" value="{{ value }}" {{ validation }} />
    </div>
{% endmacro %}

{% macro password(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" for="{{ name }}" title="{{ helpText }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <input class="form-control" name="{{ name }}" type="password" id="{{ name }}" value="{{ value }}" {{ validation }} />
    </div>
{% endmacro %}

{% macro checkbox(name, title, value, groupClass, accessKey) %}
    <div class="form-group ml-2 mr-3 mb-1 {{ groupClass }}">
        <div class="form-check">
            <input title="{{ title }}" class="form-check-input" type="checkbox" id="{{ name }}" name="{{ name }}" {% if value == 1 %}checked{% endif %}>
            <label class="form-check-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        </div>
    </div>
{% endmacro %}

{% macro radio(name, id, title, value, helpText, groupClass, accessKey, setValue) %}
    <div class="form-group ml-2 mr-3 mb-1 {{ groupClass }}">
        <div class="form-check">
            <input class="form-check-input" type="radio" id="{{ id }}" name="{{ name }}" value="{{ setValue }}" {% if value == setValue %}checked{% endif %}>
            <label class="form-check-label" for="{{ name }}" title="{{ helpText }}" accesskey="{{ accessKey }}">{{ title }}</label>
        </div>
    </div>
{% endmacro %}

{% macro dropdown(name, type, title, value, options, optionId, optionValue, helpText, groupClass, validation, accessKey, callBack, dataAttributes, optionGroups) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" for="{{ name }}" title="{{ helpText }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <select class="form-control" {% if type == "dropdownmulti" %}multiple{% endif %} name="{{ name }}" id="{{ name }}" {{ callBack }}
        {% if type == "dropdownmulti" %}
            data-allow-clear="true"
            data-placeholder--id=null
            data-placeholder--value=""
        {% endif %}
        {% if dataAttributes|length > 0 %}
        {% for attribute in dataAttributes %}
            {{ attribute.name }}="{{ attribute.value }}"
        {% endfor %}
        {% endif %}>

        {% set hasGroups = optionGroups|length > 0 %}
        {% if not hasGroups %}
            {% set optionGroups = {label: "General"} %}
        {% endif %}

        {% for group in optionGroups %}
            {% if hasGroups %}
                <optgroup label="{{ group.label }}">
                {% set tempOptions = attribute(options, group.id) %}
            {% else %}
                {% set tempOptions = options %}
            {% endif %}

            {% for option in tempOptions %}

                {% set itemOptionId = attribute(option, optionId) %}
                {% set itemOptionValue = attribute(option, optionValue) %}

                {% if type == "dropdownmulti" %}
                    {% set selected = (itemOptionId in value) %}
                {% else %}
                    {% set selected = (itemOptionId == value) %}
                {% endif %}

                <option value="{{ itemOptionId }}" {% if selected %}selected{% endif %}>{{ itemOptionValue }}</option>
            {% endfor %}

            {% if hasGroups %}
                </optgroup>
            {% endif %}
        {% endfor %}

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

{% macro permissions(name, options) %}
    <table class="table table-bordered">
        <tr>
            <th>{% trans "Group" %}</th>
            <th>{% trans "View" %}</th>
            <th>{% trans "Edit" %}</th>
            <th>{% trans "Delete" %}</th>
        </tr>
        {% for item in options %}
            <tr>
                <td>{{ name }}</td>
                <td><input type="checkbox" name="{{ name }}" value="{{ value_view }}" {{ value_view_checked }}></td>
                <td><input type="checkbox" name="{{ name }}" value="{{ value_edit }}" {{ value_edit_checked }}></td>
                <td><input type="checkbox" name="{{ name }}" value="{{ value_del }}" {{ value_del_checked }}></td>
            </tr>
        {% endfor %}
    </table>
{% endmacro %}

{% macro date(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="input-group">
            <div class="input-group-prepend input-group-text date-open-button" role="button"><i class="fa fa-calendar"></i></div>
            <input class="form-control dateControl date" type="text" {{ validation }} name="{{ name }}" id="{{ name }}" value="{{ value }}" />
            <span class="input-group-append input-group-addon input-group-text date-clear-button d-none" role="button"><i class="fa fa-times"></i></span>
        </div>
    </div>
{% endmacro %}

{% macro dateMonth(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="input-group">
            <span class="input-group-prepend input-group-text date-open-button" role="button"><i class="fa fa-calendar"></i></span>
            <input class="form-control dateControl month" type="text" {{ validation }} name="{{ name }}" id="{{ name }}" value="{{ value }}" />
            <span class="input-group-append input-group-addon input-group-text date-clear-button d-none" role="button"><i class="fa fa-times"></i></span>
        </div>
    </div>
{% endmacro %}

{% macro dateTime(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}" for="{{ linkedName }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="input-group">
            <span class="input-group-prepend input-group-text date-open-button" role="button"><i class="fa fa-calendar"></i></span>
            <input class="form-control dateControl dateTime" type="text" {{ validation }} name="{{ name }}" id="{{ name }}" value="{{ value }}" />
            <span class="input-group-append input-group-addon input-group-text date-clear-button d-none" role="button"><i class="fa fa-times"></i></span>
        </div>
    </div>
{% endmacro %}

{% macro time(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1 {% if title == '' %}d-none{% endif %}" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="input-group">
            <span class="input-group-prepend input-group-text date-open-button" role="button"><i class="fa fa-calendar"></i></span>
            <input class="form-control dateControl time" type="text" {{ validation }} name="{{ name }}" id="{{ name }}" value="{{ value }}" />
            <span class="input-group-append input-group-addon input-group-text date-clear-button d-none" role="button"><i class="fa fa-times"></i></span>
        </div>
    </div>
{% endmacro %}

{% macro switch(name, title, value, labelWidth, switchSize, onText, offText, groupClass, accessKey, disabled) %}
    <div class="form-group {{ groupClass }}">
        <div class="checkbox">
            <input type="checkbox" class="bootstrap-switch-target" id="{{ name }}" name="{{ name }}" accesskey="{{ accessKey }}"
                {% if value == 1 %}checked{% endif %}
                {% if disabled == 1 %}disabled{% endif %}
                data-label-text="{{ title }}"
                {% if onText not in [null, undefined, ""] %} data-on-text="{{ onText }}"{% endif %}
                {% if offText not in [null, undefined, ""] %} data-off-text="{{ offText }}"{% endif %}
                {% if switchSize not in [null, undefined, ""] %}data-size="{{ switchSize }}"{% else %}data-size="small"{% endif %}
                {% if labelWidth not in [null, undefined, ""] %} data-label-width="{{ labelWidth }}"{% endif %}
            >
        </div>
    </div>
{% endmacro %}

{% macro color(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <input class="form-control XiboColorPicker" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" {{ validation }} />
    </div>
{% endmacro %}

{% macro inputNameGrid(name, title, groupClass, useRegexName, logicalOperatorName) %}
    <div class="form-group mr-1 mb-1 {{ groupClass }}">
        <label class="control-label mr-1" title="" for="{{ name }}" accesskey="">{{ title }}</label>
        <div>
            <div class="input-group">
                <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="">
                <div class="input-group-append input-group-addon">
                    <div class="input-group-text">
                        <input title="{% trans "Use Regex?" %}" type="checkbox" {% if useRegexName %} id="{{ useRegexName }}" name="{{ useRegexName }}" {% else %} id="useRegexForName" name="useRegexForName"{% endif %}>
                    </div>
                    <select class="custom-select" {% if logicalOperatorName %} id="{{ logicalOperatorName }}" name="{{ logicalOperatorName }}" {% else %} id="logicalOperatorName" name="logicalOperatorName"{% endif %}
                            title="{% trans "When filtering by multiple names, which logical operator should be used?" %}" style="min-width:auto!important">
                        <option value="OR" selected>OR</option>
                        <option value="AND">AND</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

{% macro dateRangeFilter(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group mr-1 mb-1 d-flex flex-row {{ groupClass }}">
        {% set today =  now | date_modify('today') | date("Y-m-d H:i:s") %}
        <div class="form-group mr-1">
            <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">
                {{ title }}
            </label>
            <div class="d-inline-flex">
                <select class="form-control XiboDateRangeFilter" name="{{ name }}" id="{{ name }}">
                    <option value="" >{% trans "Select a range" %}</option>
                    <option value="today" selected>{% trans "Today" %}</option>
                    <option value="yesterday">{% trans "Yesterday" %}</option>
                    <option value="thisweek">{% trans "This Week" %}</option>
                    <option value="thismonth">{% trans "This Month" %}</option>
                    <option value="thisyear">{% trans "This Year" %}</option>
                    <option value="lastweek">{% trans "Last Week" %}</option>
                    <option value="lastmonth">{% trans "Last Month" %}</option>
                    <option value="lastyear">{% trans "Last Year" %}</option>
                </select>
            </div>
        </div>
        <div class="form-group hidden mr-1 {{ 'rangeFilterInput_' ~ name }}">
            <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">
                {% trans "From Date" %}
            </label>
            <div class="input-group">
                <div class="input-group-prepend input-group-text date-open-button" role="button">
                    <i class="fa fa-calendar"></i>
                </div>
                <input class="form-control dateControl date rangeInput"
                       type="text" name="fromDt" id="{{ 'fromDt_' ~ name }}"
                       value="{{ today }}"
                />
                <span class="input-group-append input-group-addon input-group-text date-clear-button d-none"
                      role="button"
                >
                    <i class="fa fa-times"></i>
                </span>
            </div>
        </div>
        <div class="form-group hidden {{ 'rangeFilterInput_' ~ name }}">
            <label class="control-label mr-1" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">
                {% trans "To Date" %}
            </label>
            <div class="input-group">
                <div class="input-group-prepend input-group-text date-open-button" role="button">
                    <i class="fa fa-calendar"></i>
                </div>
                <input class="form-control dateControl date rangeInput"
                       type="text" name="toDt" id="{{ 'toDt_' ~ name }}"
                       value="{{ today | date_modify('+1 day -1 second') | date("Y-m-d H:i:s") }}"
                />
                <span class="input-group-append input-group-addon input-group-text date-clear-button d-none"
                      role="button"
                >
                    <i class="fa fa-times"></i>
                </span>
            </div>
        </div>
    </div>
{% endmacro %}