{% 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) %}
    <div class="form-group row {{ groupClass }}">
        <div class="offset-sm-2 col-sm-10">
            {% if type == "link" %}
            <a class="btn btn-white" href="{{ link }}">{{ title }}</a>
            {% else %}
            <button id="{{ id }}" class="btn btn-white 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 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) %}
    <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" data-auto-complete-url="{{ url_for('tag.search') }}" {{ validation }} />
            <small class="form-text text-muted">{{ helpText }}</small>
        </div>
    </div>
{% endmacro %}

{% macro number(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="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) %}
    <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>
{% endmacro %}

{% macro checkbox(name, title, value, helpText, groupClass, accessKey, disabled) %}
    <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" id="{{ name }}" name="{{ name }}" {% if value == 1 %}checked{% endif %} {% if disabled == 1 %}disabled{% endif %}>
                <label class="form-check-label" for="{{ name }}" 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) %}
    <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 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 %}

                    {% 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 optionFilter %}
                        {% set itemOptionType = attribute(option, optionFilter) %}
                    {% 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'><img style='max-width: 100px' src='{{ itemOptionImageValue }}' /></span> <span class='media-body'>{{ itemOptionValue }}</span></span>"
                            {% endif %}
                            {% if itemOptionType %}
                                data-filter-class="{{ itemOptionType }}"
                            {% 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 datePicker dateControl" 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 dateTimePicker dateControl" 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 dateMonthPicker dateControl" 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 timePicker dateControl" 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) %}
    <span class="fa fa-info-circle" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-html="true"
          data-content='<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 %}