{{ header }}
{#&lt;ul class=&quot;breadcrumb&quot;&gt;#}
{#  {% for breadcrumb in breadcrumbs %}#}
{#  &lt;li&gt;&lt;a href=&quot;{{ breadcrumb.href }}&quot;&gt;{{ breadcrumb.text }}&lt;/a&gt;&lt;/li&gt;#}
{#  {% endfor %}#}
{#&lt;/ul&gt;#}
{#{% if j3.settings.get('pageTitlePosition') == 'top' %}#}
{#  &lt;h1 class=&quot;title page-title&quot;&gt;&lt;span&gt;{{ heading_title }}&lt;/span&gt;&lt;/h1&gt;#}
{#{% endif %}#}
{#{{ j3.loadController('journal3/layout', 'top') }}#}


&lt;style&gt;

.component-product-empty {
 
   width: 250px !important

}
.page-content{
    padding: 0px !important;
}
&lt;/style&gt;


&lt;div id=&quot;extension-pc-builder-pc-builder&quot; class=&quot;container pc-builder-journal3&quot;&gt;
  {% if success %}
  &lt;div class=&quot;alert alert-success alert-dismissible&quot;&gt;&lt;i class=&quot;fa fa-check-circle&quot;&gt;&lt;/i&gt; {{ success }}&lt;/div&gt;
  {% endif %}
  {% if error_warning %}
  &lt;div class=&quot;alert alert-warning&quot;&gt;&lt;i class=&quot;fa fa-exclamation-circle&quot;&gt;&lt;/i&gt; {{ error_warning }}&lt;/div&gt;
  {% endif %}
  &lt;div class=&quot;row&quot;&gt;{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    &lt;div id=&quot;content&quot; class=&quot;{{ class }} page-content&quot;&gt;{{ content_top }}
      &lt;div id=&quot;pc-builder-container&quot; class=&quot;pc-builder-container&quot;&gt;
      	&lt;div class=&quot;row header-container&quot;&gt;
      		&lt;div class=&quot;col-xs-3&quot;&gt;
						&lt;div class=&quot;logo&quot;&gt;&lt;img src=&quot;{{ logo }}&quot; alt=&quot;{{ heading_title }}&quot; title=&quot;{{ heading_title }}&quot; class=&quot;img-responsive&quot; /&gt;&lt;/div&gt;
					&lt;/div&gt;
      		&lt;div class=&quot;col-xs-9&quot;&gt;
      			&lt;div id=&quot;menu-container&quot; class=&quot;text-right&quot;&gt;
      				&lt;span class=&quot;button-container&quot;&gt;&lt;button type=&quot;button&quot; onclick=&quot;pc_builder.cart($('#input-amount').val(), $('#input-weight').val(), $('#input-build').val());&quot; id=&quot;pc-builder-cart&quot; class=&quot;pc-builder-button&quot;&gt;&lt;i class=&quot;fa fa-shopping-cart fa-fw&quot;&gt;&lt;/i&gt;&lt;span class=&quot;hidden-xs hidden-sm hidden-md&quot;&gt;&lt;br /&gt;{{ button_cart }}&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;
      				&lt;span class=&quot;button-container&quot;&gt;&lt;button type=&quot;button&quot; onclick=&quot;pc_builder.save('');&quot; id=&quot;pc-builder-save&quot; class=&quot;pc-builder-button&quot;&gt;&lt;i class=&quot;fa fa-save fa-fw&quot;&gt;&lt;/i&gt;&lt;span class=&quot;hidden-xs hidden-sm hidden-md&quot;&gt;&lt;br /&gt;{{ button_save }}&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;
      				&lt;span class=&quot;button-container&quot;&gt;&lt;a href=&quot;{{ print }}&quot; target=&quot;_blank&quot; id=&quot;pc-builder-print&quot; class=&quot;pc-builder-button&quot;&gt;&lt;i class=&quot;fa fa-print fa-fw&quot;&gt;&lt;/i&gt;&lt;span class=&quot;hidden-xs hidden-sm hidden-md&quot;&gt;&lt;br /&gt;{{ button_print }}&lt;/span&gt;&lt;/a&gt;&lt;/span&gt;
      				&lt;span class=&quot;button-container&quot;&gt;&lt;button type=&quot;button&quot; id=&quot;pc-builder-screenshot&quot; class=&quot;pc-builder-button&quot;&gt;&lt;i class=&quot;fa fa-picture-o fa-fw&quot;&gt;&lt;/i&gt;&lt;span class=&quot;hidden-xs hidden-sm hidden-md&quot;&gt;&lt;br /&gt;{{ button_screenshot }}&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;
      				&lt;span class=&quot;button-container&quot;&gt;&lt;button type=&quot;button&quot; onclick=&quot;pc_builder.clear('');&quot; id=&quot;pc-builder-clear&quot; class=&quot;pc-builder-button&quot;&gt;&lt;i class=&quot;fa fa-refresh fa-fw&quot;&gt;&lt;/i&gt;&lt;span class=&quot;hidden-xs hidden-sm hidden-md&quot;&gt;&lt;br /&gt;{{ button_clear }}&lt;/span&gt;&lt;/button&gt;&lt;/span&gt;
      			&lt;/div&gt;
      		&lt;/div&gt;
      	&lt;/div&gt;
      	&lt;div class=&quot;row&quot;&gt;
      		&lt;div class=&quot;col-sm-3&quot;&gt;
      			&lt;div class=&quot;sub-heading text-center&quot;&gt;{{ text_sub_heading }}&lt;/div&gt;
						&lt;div class=&quot;checkbox hide-empty-component&quot;&gt;
							&lt;label class=&quot;small&quot;&gt;
								&lt;input type=&quot;checkbox&quot; name=&quot;hide&quot; value=&quot;1&quot; id=&quot;input-hide&quot; /&gt;
								{{ text_hide }}
							&lt;/label&gt;
						&lt;/div&gt;
      		&lt;/div&gt;
      		&lt;div class=&quot;col-sm-9&quot;&gt;
      			&lt;div id=&quot;total-container&quot; class=&quot;text-center&quot;&gt;
      				{#&lt;div class=&quot;total-weight&quot;&gt;#}
      				{#	&lt;div class=&quot;hidden-xs hidden-sm hidden-md&quot;&gt;{{ text_total_weight }}&lt;/div&gt;#}
      				{#	&lt;div&gt;&lt;span class=&quot;hidden-lg&quot;&gt;&lt;i class=&quot;fa fa-balance-scale&quot;&gt;&lt;/i&gt; &lt;/span&gt;{{ total_weight }}&lt;/div&gt;#}
      				{#&lt;/div&gt;#}
      				&lt;div class=&quot;total-amount&quot;&gt;
      					&lt;div class=&quot;hidden-xs hidden-sm hidden-md&quot;&gt;{{ text_total_amount }}&lt;/div&gt;
      					&lt;div&gt;&lt;span class=&quot;hidden-lg&quot;&gt;&lt;i class=&quot;fa fa-shopping-bag&quot;&gt;&lt;/i&gt; &lt;/span&gt;{{ total_amount }}&lt;/div&gt;
      				&lt;/div&gt;
      			&lt;/div&gt;
      		&lt;/div&gt;
      	&lt;/div&gt;
      	{% if pc_builder_categories %}
				&lt;form class=&quot;form-horizontal&quot; id=&quot;form-pc-builder&quot; style=&quot;margin-top: 15px;&quot;&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;amount&quot; value=&quot;{{ amount }}&quot; id=&quot;input-amount&quot; /&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;weight&quot; value=&quot;{{ weight }}&quot; id=&quot;input-weight&quot; /&gt;
					&lt;input type=&quot;hidden&quot; name=&quot;build&quot; value=&quot;{{ build }}&quot; id=&quot;input-build&quot; /&gt;
	      	&lt;div&gt;
	      		{% for pc_builder_category in pc_builder_categories %}
	      		&lt;div class=&quot;pc-builder-category-container&quot;&gt;
	      			&lt;h4&gt;{{ pc_builder_category.name }}&lt;/h4&gt;
	      			{% if pc_builder_category.pc_builder_components %}
	      			&lt;div&gt;
	      				{% for pc_builder_component in pc_builder_category.pc_builder_components %}
	      				&lt;div id=&quot;pc-builder-component-container-{{ pc_builder_component.pc_builder_component_id }}&quot; class=&quot;pc-builder-component-container clearfix&quot; data-product-selected=&quot;{% if pc_builder_component.product %}yes{% else %}no{% endif %}&quot;&gt;
	      					&lt;div id=&quot;pc-builder-component-image-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot; class=&quot;component-image&quot;&gt;{% if pc_builder_component.product %}&lt;img src=&quot;{{ pc_builder_component.product.image }}&quot; class=&quot;thumbnail&quot; /&gt;{% else %}&lt;img src=&quot;{{ pc_builder_component.thumb }}&quot; class=&quot;thumbnail&quot; /&gt;{% endif %}&lt;/div&gt;
	      					&lt;div id=&quot;pc-builder-component-name-product-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot; class=&quot;component-name-product&quot;&gt;
		      					&lt;div id=&quot;pc-builder-component-name-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot; class=&quot;component-name&quot;&gt;{{ pc_builder_component.name }} {% if pc_builder_component.required %}&lt;span class=&quot;text-danger&quot;&gt;*&lt;/span&gt;{% endif %}&lt;/div&gt;
		      					&lt;div id=&quot;pc-builder-component-product-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot; class=&quot;component-product&quot;&gt;
		      					{% if pc_builder_component.product %}
		      						{{ pc_builder_component.product.name }}
		      						{% if pc_builder_component.product.option %}
		      						&lt;br /&gt; &lt;a role=&quot;button&quot; data-toggle=&quot;collapse&quot; href=&quot;#collapse-option-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot; aria-expanded=&quot;false&quot; aria-controls=&quot;collapse-option-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot;&gt;Show options &lt;i class=&quot;fa fa-caret-down&quot;&gt;&lt;/i&gt;&lt;/a&gt;
											&lt;div class=&quot;collapse&quot; id=&quot;collapse-option-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot;&gt;
											  &lt;div class=&quot;small&quot;&gt;
											    {% for option in pc_builder_component.product.option %}
											    - {{ option.name }}: {{ option.value }}&lt;br /&gt;
											    {% endfor %}
											  &lt;/div&gt;
											&lt;/div&gt;
		      						{% endif %}
	      						{% else %}
	      							&lt;div class=&quot;component-product-empty&quot;&gt;&amp;nbsp;&lt;/div&gt;
		      					{% endif %}
		      					&lt;/div&gt;
	      					&lt;/div&gt;
	      					&lt;div id=&quot;pc-builder-component-choose-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot; class=&quot;component-choose hidden-xs hidden-sm&quot;&gt;

	      						{% if pc_builder_component.product %}
	      							&lt;button type=&quot;button&quot; onclick=&quot;pc_builder_product.remove('{{ pc_builder_component.pc_builder_component_id }}', '{{ pc_builder_component.product.product_id }}', '1');&quot; id=&quot;pc-builder-product-remove-{{ pc_builder_component.product_id }}&quot; class=&quot;btn btn-md btn-danger hidden-xs hidden-sm remove remove-desktop&quot;&gt;&lt;i class=&quot;fa fa-trash fa-fw&quot;&gt;&lt;/i&gt;&lt;/button&gt;

	      							&lt;button type=&quot;button&quot; onclick=&quot;pc_builder_product.remove('{{ pc_builder_component.pc_builder_component_id }}', '{{ pc_builder_component.product.product_id }}', '1');&quot; id=&quot;pc-builder-product-remove-{{ pc_builder_component.product_id }}-mobile&quot; class=&quot;hidden-md hidden-lg remove remove-mobile&quot;&gt;&lt;i class=&quot;fa fa-trash fa-fw text-danger&quot;&gt;&lt;/i&gt;&lt;/button&gt;
      							{% endif %}

      							&lt;a href=&quot;{{ pc_builder_component.href }}&quot; class=&quot;btn btn-md btn-primary hidden-xs hidden-sm&quot;&gt;&lt;i class=&quot;fa {% if pc_builder_component.product %}fa-refresh{% else %}fa-plus{% endif %} fa-fw&quot;&gt;&lt;/i&gt; &lt;span class=&quot;hidden-xs hidden-sm hidden-md&quot;&gt;{% if pc_builder_component.product %}{{ button_change }}{% else %}{{ button_choose }}{% endif %}&lt;/span&gt;&lt;/a&gt;
    							&lt;/div&gt;
	      					{% if pc_builder_component.product %}&lt;div id=&quot;pc-builder-component-price-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot; class=&quot;component-price hidden-xs hidden-sm&quot;&gt;{{ pc_builder_component.product.price }}&lt;/div&gt;{% endif %}

	      					&lt;div id=&quot;pc-builder-component-choose-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}-mobile&quot; class=&quot;component-choose-mobile hidden-md hidden-lg&quot;&gt;

	      						&lt;div class=&quot;clearfix&quot;&gt;
	      							&lt;a href=&quot;{{ pc_builder_component.href }}&quot; class=&quot;pull-right hidden-md hidden-lg&quot;&gt;&lt;i class=&quot;fa {% if pc_builder_component.product %}fa-refresh{% else %}fa-plus{% endif %} fa-fw&quot;&gt;&lt;/i&gt;&lt;/a&gt;

		      						{% if pc_builder_component.product %}
		      							&lt;button type=&quot;button&quot; onclick=&quot;pc_builder_product.remove('{{ pc_builder_component.pc_builder_component_id }}', '{{ pc_builder_component.product.product_id }}', '1');&quot; id=&quot;pc-builder-product-remove-{{ pc_builder_component.product_id }}-mobile&quot; class=&quot;pull-right hidden-md hidden-lg remove remove-mobile&quot;&gt;&lt;i class=&quot;fa fa-trash fa-fw text-danger&quot;&gt;&lt;/i&gt;&lt;/button&gt;
	      							{% endif %}
      							&lt;/div&gt;
      							&lt;div class=&quot;clearfix&quot;&gt;{% if pc_builder_component.product %}&lt;div id=&quot;pc-builder-component-price-{{ pc_builder_category.pc_builder_category_id }}-{{ pc_builder_component.pc_builder_component_id }}&quot; class=&quot;component-price-mobile&quot;&gt;{{ pc_builder_component.product.price }}&lt;/div&gt;{% endif %}&lt;/div&gt;
	      					&lt;/div&gt;
	    					&lt;/div&gt;
	      				{% endfor %}
	      			&lt;/div&gt;
	      			{% endif %}
	      		&lt;/div&gt;
	      		{% endfor %}
	      	&lt;/div&gt;
      	&lt;/form&gt;
      	{% endif %}
      &lt;/div&gt;

      {% if description %}
          &lt;div&gt;
              {{ description }}
          &lt;/div&gt;
          {% endif %}

    {{ content_bottom }}&lt;/div&gt;
    {{ column_right }}&lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
$('#pc-builder-screenshot').on('click',function(){
	html2canvas(document.querySelector(&quot;#pc-builder-container&quot;)).then(canvas =&gt; {
    var a = document.createElement('a');
    // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
    a.href = canvas.toDataURL(&quot;image/jpeg&quot;).replace(&quot;image/jpeg&quot;, &quot;image/octet-stream&quot;);
    a.download = '{{ text_screenshot_filename }}-pc-builder-' + getRandomString(10) + '.jpg';
    a.click();
	});
});

function getRandomString(length) {
  var randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var result = '';
  for ( var i = 0; i &lt; length; i++ ) {
      result += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
  }
  return result;
}
--&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
    $('#input-hide').change(function() {
		if($('#input-hide').is(':checked')) {
			$('div[data-product-selected=&quot;no&quot;]').hide()
		} else {
			$('.pc-builder-component-container').show();
		}
    });
--&gt;&lt;/script&gt;


{{ footer }}