{% macro disabled(name, title, value, helpText, groupClass) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label">{{ title }}</label>
        <div class="col-sm-10">
            <p class="form-control-static">{{ value }}</p>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

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

{% macro raw(text, groupClass) %}
    <div class="row">
        <div class="col-sm-12 {{ groupClass }}">
            {{ text|raw }}
        </div>
    </div>
{% endmacro %}

{% macro message(message, groupClass, messageStyleClass) %}
    <div class="row">
        <div class="{% if messageStyleClass %}{{messageStyleClass}}{% endif %} col-sm-12 {{ groupClass }}">
            <p>{{ message }}</p>
        </div>
    </div>
{% endmacro %}

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

{% macro button(title, type, link, groupClass, id, buttonClass) %}
    <div class="form-group row {{ groupClass }}">
        <div class="offset-sm-2 col-sm-10">
            {% if type == "link" %}
            <a class="btn {% if buttonClass %}{{ buttonClass }}{% else %}btn-white{% endif %}" href="{{ link }}">{{ title }}</a>
            {% else %}
            <button id="{{ id }}" class="btn {% if buttonClass %}{{ buttonClass }}{% else %}btn-white{% endif %} ml-0" type="{{ type }}">{{ title }}</button>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{% macro input(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" {{ validation }} />
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro colorPicker(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10 colorpicker-input">
            <div class="input-group">
                <div class="input-group-prepend">
                    <i class="input-group-text input-group-addon" id="{{ name }}_label"></i>
                </div>
                <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" aria-describedby="{{ name }}_label" value="{{ value }}" {{ validation }} />
            </div>
            <small class="form-text text-muted">{{ helpText }}</small>
            <div class="picker-container"></div>
        </div>
    </div>
{% endmacro %}

{% macro inputWithButton(name, title, value, helpText, groupClass, validation, accessKey, buttonId, buttonTitle, buttonType, buttonLink) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="input-group col-sm-10">
            <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" {{ validation }} aria-describedby="{{ buttonId }}" />

            <div class="input-group-append">
                {% if buttonType == "link" %}
                    <a class="btn btn-white" href="{{ link }}">{{ buttonTitle }}</a>
                {% else %}
                    <button id="{{ buttonId }}" class="btn btn-white" type="{{ buttonType }}">{{ buttonTitle }}</button>
                {% endif %}
            </div>
        </div>
        <small class="form-text offset-2 px-4 text-muted">{{ helpText }}</small>
    </div>
{% endmacro %}

{% macro inputWithTags(name, title, value, helpText, groupClass, validation, accessKey, exactTag, exactTagTitle, logicalOperatorTitle, exactTagValue, logicalOperatorValue, autoCompleteEnabled = 1) %}
        {% if exactTag %}
            <div class="form-group tags-input-addons-wide row {{ groupClass }}">
            <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
            <div class="input-group input-group-tags-exact col-sm-10">
                <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" data-role="tagsInputForm" {% 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 }}" {% if exactTagValue %}checked{% endif %}>
                    </div>
                    <select class="custom-select" id="logicalOperator" name="logicalOperator" title="{{ logicalOperatorTitle }}" >
                        <option value="OR" {% if logicalOperatorValue != "AND" %}selected{% endif %}>OR</option>
                        <option value="AND" {% if logicalOperatorValue == "AND" %}selected{% endif %}>AND</option>
                    </select>
                </div>
                <small class="form-text text-muted">{{ helpText }}</small>
            </div>
        {% else %}
            <div class="form-group tags-input-wide row {{ groupClass }}">
            <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
            <div class="col-sm-10">
                <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" data-role="tagsInputForm" {% if autoCompleteEnabled == 1 %} data-auto-complete-url="{{ url_for('tag.search') }}?allTags=1" {% endif %}  {{ validation }} />
                <small class="form-text text-muted">{{ helpText }}</small>
            </div>
        {% endif %}
    </div>
{% endmacro %}

{% macro number(name, title, value, helpText, groupClass, validation, accessKey, maxNumber, minNumber) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <input class="form-control" name="{{ name }}" {% if maxNumber != undefined %}max="{{maxNumber}}" {% endif %}{% if minNumber != undefined %}min="{{minNumber}}" {% endif %}type="number" id="{{ name }}" value="{{ value }}" {{ validation }} />
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro email(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <input class="form-control" name="{{ name }}" type="email" id="{{ name }}" value="{{ value }}" {{ validation }} />
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro password(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <input class="form-control" name="{{ name }}" type="password" id="{{ name }}" value="{{ value }}" {{ validation }} />
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro textarea(name, title, value, helpText, groupClass, validation, rows, inline) %}
    {% if inline == true %}
        <div class="form-group row {{ groupClass }}">
            <label class="col-sm-2 control-label" for="{{ name }}">{{ title }}</label>
            <div class="col-sm-10">
                <textarea class="form-control" name="{{ name }}" id="{{ name }}" rows="{{ rows }}" {{ validation }}>{{ value }}</textarea>
                <small class="form-text text-muted">{{ helpText }}</small>
            </div>
        </div>
    {% else %}
        <div class="form-group row {{ groupClass }}">
            <div class="col-sm-12">
                <small class="form-text text-muted">{{ helpText }}</small>
                <textarea class="form-control" name="{{ name }}" id="{{ name }}" rows="{{ rows }}" {{ validation }}>{{ value }}</textarea>
            </div>
        </div>
    {% endif %}
{% endmacro %}

{% macro checkbox(name, title, value, helpText, groupClass, accessKey, disabled, id) %}
    <div class="form-group row {{ groupClass }}">
        <div class="offset-sm-2 col-sm-10">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" {% if id %} id="{{ id }}" {% else %} id="{{ name }}" {% endif %} name="{{ name }}" {% if value == 1 %}checked{% endif %} {% if disabled == 1 %}disabled{% endif %}>
                <label class="form-check-label" {% if id %} for="{{ id }}" {% else %} for="{{ name }}" {% endif %} accesskey="{{ accessKey }}">{{ title }}</label>
            </div>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro radio(name, id, title, value, helpText, groupClass, accessKey, setValue) %}
    <div class="form-group row {{ groupClass }}">
        <div class="offset-sm-2 col-sm-10">
            <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="{{ id }}" accesskey="{{ accessKey }}">{{ title }}</label>
            </div>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro dropdown(name, type, title, value, options, optionId, optionValue, helpText, groupClass, validation, accessKey, callBack, dataAttributes, optionGroups, optionImageValue, optionFilter, readonly) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <select class="form-control" {% if type == "dropdownmulti" %}multiple{% endif %} name="{{ name }}" id="{{ name }}" {{ callBack }} {% if readonly %}readonly{% endif %}
                {% 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 %}
            {{ validation }}>

            {% 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 %}

                    {% if optionId == "" %}
                        {% set itemOptionId = option %}
                        {% set itemOptionValue = option %}
                        {% if optionImageValue %}
                            {% set itemOptionImageValue = option %}
                        {% endif %}
                    {% else %}
                        {% set itemOptionId = attribute(option, optionId) %}
                        {% set itemOptionValue = attribute(option, optionValue) %}
                        {% if optionImageValue %}
                            {% set itemOptionImageValue = attribute(option, optionImageValue) %}
                        {% endif %}
                    {% endif %}

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

                    <option value="{{ itemOptionId }}" {% if selected %}selected{% endif %}
                            {% if itemOptionImageValue %}
                                data-content="<span class='media'><span class='media-left mr-2'><img style='max-width: 100px; max-height: 80px;' src='{{ itemOptionImageValue }}' /></span> <span class='media-body'>{{ itemOptionValue }}</span></span>"
                            {% endif %}

                            {% if optionFilter %}
                                {% if optionFilter[0] is not defined %}
                                    data-filter-class="{{ attribute(option, optionFilter) }}"
                                {% else %}
                                    {% for filter in optionFilter %}
                                        data-filter{{ loop.index0 }}-class="{{  attribute(option, filter) }}"
                                    {% endfor %}
                                {% endif %}
                            {% endif %}
                    >{{ itemOptionValue }}</option>
                {% endfor %}

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

            </select>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro date(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <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 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>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro dateTime(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <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>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro dateMonth(name, title, value, helpText, groupClass, validation, accessKey) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" title="{{ helpText }}" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <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>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro time(name, title, value, helpText, groupClass, validation, accessKey, customFormat) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="col-sm-10">
            <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 }}" {% if customFormat %}data-custom-format="{{ customFormat }}"{% endif %} />
                <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>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro switch(name, title, value, helpText, labelWidth, switchSize, onText, offText, groupClass, accessKey, disabled) %}
    <div class="form-group row {{ groupClass }}">
        <div class="offset-sm-2 col-sm-10">
            <div class="checkbox" title="{{ helpText }}">
                <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>
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro playerCompat(android, linux, tizen, webos, windows, message) %}
    <span class="fa fa-info-circle" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true"
          data-content='{% if message %}<p>{{ message }}</p>{% endif %}<ul class="player-compatibility">
                {% if android %}<li><span class="fa fa-android"></span> {{ android }}</li>{% endif %}
                {% if linux %}<li><span class="fa fa-linux"></span> {{ linux }}</li>{% endif %}
                {% if tizen %}<li>Tizen: {{ tizen }}</li>{% endif %}
                {% if webos %}<li>webOS: {{ webos }}</li>{% endif %}
                {% if windows %}<li><span class="fa fa-windows"></span> {{ windows }}</li>{% endif %}
            </ul>'>
    </span>
{% endmacro %}

{% macro inputWithLogicalOperator(name, title, value, helpText, groupClass, validation, accessKey, logicalOperatorValue) %}
    <div class="form-group row {{ groupClass }}">
        <label class="col-sm-2 control-label" for="{{ name }}" accesskey="{{ accessKey }}">{{ title }}</label>
        <div class="input-group col-sm-10">
            <input class="form-control" name="{{ name }}" type="text" id="{{ name }}" value="{{ value }}" {{ validation }} />
            <div class="input-group-append input-group-addon">
                <select class="custom-select" id="logicalOperatorName" name="logicalOperatorName" title="{% trans "When filtering by multiple names, which logical operator should be used?" %}">
                        <option value="OR" {% if logicalOperatorValue != "AND" %}selected{% endif %}>OR</option>
                        <option value="AND" {% if logicalOperatorValue == "AND" %}selected{% endif %}>AND</option>
                </select>
            </div>
            <small class="form-text text-muted">{{ helpText }}</small>
        </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 %}