{% if options %}
<div id="mpdependentoption-{{ mp_option }}">
<div class="options {{ journal2.settings.get('product_page_options_push_classes') }}">
{% for option in options %}
  {% if option.type == 'select' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
      <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
        <option value="">{{ text_select }}</option>
        {% for option_value in option.product_option_value %}
          <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
            {% if option_value.price %}
              ({{ option_value.price_prefix }}{{ option_value.price }})
            {% endif %} </option>
        {% endfor %}
      </select>
    </div>
  {% endif %}
  {% if option.type == 'radio' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label">{{ option.name }}</label>
      <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
          <div class="radio">
            <label>
              <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}"/>
              {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail"/> {% endif %}
              {{ option_value.name }}
              {% if option_value.price %}
                ({{ option_value.price_prefix }}{{ option_value.price }})
              {% endif %} </label>
          </div>
        {% endfor %} </div>
    </div>
  {% endif %}
  {% if option.type == 'checkbox' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label">{{ option.name }}</label>
      <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
          <div class="checkbox">
            <label>
              <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}"/>
              {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail"/> {% endif %}
              {{ option_value.name }}
              {% if option_value.price %}
                ({{ option_value.price_prefix }}{{ option_value.price }})
              {% endif %} </label>
          </div>
        {% endfor %} </div>
    </div>
  {% endif %}
  {% if option.type == 'text' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
      <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control"/>
    </div>
  {% endif %}
  {% if option.type == 'textarea' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
      <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>
    </div>
  {% endif %}
  {% if option.type == 'file' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label">{{ option.name }}</label>
      <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
      <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}"/>
    </div>
  {% endif %}
  {% if option.type == 'date' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
      <div class="input-group date">
        <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id }}" class="form-control"/>
        <span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
</span></div>
    </div>
  {% endif %}
  {% if option.type == 'datetime' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
      <div class="input-group datetime">
        <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id }}" class="form-control"/>
        <span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span></div>
    </div>
  {% endif %}
  {% if option.type == 'time' %}
    <div class="option form-group{% if option.required %} required {% endif %} option-{{ option.type }}">
      <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
      <div class="input-group time">
        <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control"/>
        <span class="input-group-btn">
<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
</span></div>
    </div>
  {% endif %}
{% endfor %}
</div>
<script>

function enableSelectOptionAsButtonsList_{{ mp_option }}() {
    $('#mpdependentoption-{{ mp_option }} .push-select .option.option-select, #mpdependentoption-{{ mp_option }} .push-checkbox .option.option-checkbox, #mpdependentoption-{{ mp_option }} .push-radio .option.option-radio, #mpdependentoption-{{ mp_option }} .push-image .option.option-image').each(function () {
        var $option = $(this);
        var html = '';
        html += '<ul>';
        if ($option.hasClass('option-checkbox') || $option.hasClass('option-radio')) {
            $option.find('input').each(function () {
                var $this = $(this);
                if ($this.val()) {
                    var $label = Journal.isOC2 ? $this.closest('label') : $('label[for="' + $this.attr('id') + '"]');
                    if (Journal.isOC23 && $option.parent().hasClass('push-image')) {
                        var $img = $this.parent().find('img');
                        if ($img.length) {
                            $option.addClass('option-image');
                            html += '<li class="hint--top" data-hint="' + $img.attr('alt') + '" data-value="' + $this.val() + '"><span>' + ($img.clone().wrap('<p />').parent()).html() + '</span></li>';
                        } else {
                            html += '<li data-value="' + $this.val() + '"><span>' + $label.text().trim() + '</span></li>';
                        }
                    } else {
                        html += '<li data-value="' + $this.val() + '"><span>' + $label.text().trim() + '</span></li>';
                    }
                }
            });
        } else if ($option.hasClass('option-select')) {
            $option.find('option').each(function () {
                var $this = $(this);
                if ($this.val()) {
                    html += '<li data-value="' + $this.val() + '"><span>' + $this.text().trim() + '</span></li>';
                }
            });
        } else if ($option.hasClass('option-image')) {
            $option.find(Journal.isOC2 ? '.radio' : 'tr').each(function () {
                var $this = $(this);
                var $input = $this.find('input');
                var $img = Journal.isOC2 ? ($this.find('img').clone().wrap('<p />').parent()) : $this.find('label');
                html += '<li class="hint--top" data-hint="' + $this.find('img').attr('alt') + '" data-value="' + $input.val() + '"><span>' + $img.html() + '</span></li>';
            });
        }
        html += '</ul>';
        $option.append($(html));
    });

    $('.option-select li, .option-checkbox li, .option-radio li, .option-image li').unbind('click').click(function () {
        var $this = $(this);
        var $option = $this.closest('.option');

        /* trigger change on corresponding option */
        var $input = $option.find('[value="' + $this.attr('data-value') + '"]');

        if ($option.hasClass('option-select')) {
            var $select = $input.parent();
            var val = $select.val() == $this.attr('data-value') ? '' : $this.attr('data-value');
            $select.val(val);
            $select.trigger('change');
        } else {
            $input.trigger('click');
        }

        /* add class to selected options */
        if ($option.hasClass('option-select')) {
            $option.find('[data-value]').removeClass('selected');
            $option.find('[data-value="' + $option.find('select').val() + '"]').addClass('selected');
        } else {
            $option.find('input').each(function() {
                var $el = $(this);
                var val = $(this).val();
                if ($el.is(':checked')) {
                    $option.find('[data-value="' + val + '"]').addClass('selected');
                } else {
                    $option.find('[data-value="' + val + '"]').removeClass('selected');
                }
            });
        }

        if (Journal.updatePrice) {
            Journal.updateProductPrice();
        }
    });
}


function enableProductOptions_{{ mp_option }} () {
    if (!$('html').hasClass('product-page')) {
        return;
    }

    /* change image for select options */
    $('.product-info .options:not(.push-select) .option select').unbind('change').change(function () {
        Journal.updateProductPrice();
    });

    /* change image for checkbox and radio options */
    $('.product-info .options:not(.push-radio) .option input[type="radio"]').unbind('click').click(function () {
        Journal.updateProductPrice();
    });

    $('.product-info .options:not(.push-checkbox) .option input[type="checkbox"]').unbind('click').click(function () {
        Journal.updateProductPrice();
    });
}

bindMpDependentChange();
enableSelectOptionAsButtonsList_{{ mp_option }}();
enableProductOptions_{{ mp_option }}();
</script>
</div>
{% endif %}