{% extends 'Comitium5DesignerBundle:Form:form_div_layout.html.twig' %}

{% block _admin_template_color_row %}
	<div class="form-group">
		<label class="control-label col-md-3">{{ form.vars.label|trans }}</label>

		<div class="col-md-6">
			<div class="input-group color colorpicker-default input-small" data-color="{{ form.vars.value|default('#00aceb') }}" data-color-format="rgba">
				<input id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" class="form-control" value="{{ form.vars.value|default('#00aceb') }}" type="text">
                <span class="input-group-btn">
                    <button class="btn default" type="button"><i style="background-color: {{ form.vars.value|default('#00aceb') }};"></i>&nbsp;</button>
                </span>
			</div>
		</div>
	</div>
{% endblock %}

{% block _admin_template_width_row %}
	{{ _self.standard_addon_block(form) }}
{% endblock %}

{% block _admin_template_gutterWidth_row %}
	{{ _self.standard_addon_block(form) }}
{% endblock %}

{% block _admin_template_columns_row %}
	{{ _self.standard_block(form) }}
{% endblock %}

{% block _admin_template_useBootstrapRows_row %}
	<div class="checkbox">
		{{ form_label(form, label, { label_attr:{ class:"col-md-12" }}) }}
		{{ form_widget(form, {view_type:"tick"}) }}
	</div>
{% endblock %}

{% macro standard_block(form) %}
	<div>
		<label for="width" class="control-label">{{ form.vars.label|trans }}</label>
		<input id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" class="form-control input-small" type="text"
		       value="{{ form.vars.data }}">
		<span class="help-block">{{ form.vars.help|trans|raw }}</span>
	</div>
{% endmacro %}

{% macro standard_addon_block(form) %}
	<div>
		<label for="width" class="control-label">{{ form.vars.label|trans }}</label>

		<div class="input-group input-small">
			<input id="{{ form.vars.id }}" name="{{ form.vars.full_name }}" class="form-control" type="text"
			       value="{{ form.vars.data }}">
			<span class="input-group-addon">px</span>
		</div>
		<span class="help-block">{{ form.vars.help|trans|raw }}</span>
	</div>
{% endmacro %}

{% block _admin_template_breakpoints_widget %}

	{% import ":Common:buttons.html.twig" as btn %}

	{% set disabled = (form.vars.choices|length == form.vars.value|length) %}

	<div class="row">
		<div class="col-md-10">
			<select id="template-select-breakpoint" {{ (disabled) ? 'disabled="disabled"' }} class="form-control">
				{% for choice in form.vars.choices %}
					<option value="{{ choice.data.id }}" {{ (choice.data.id in form.vars.value)? 'disabled="disabled"' }}>{{ choice.data.name }}</option>
				{% endfor %}
			</select>
		</div>
		<div class="col-md-2">
			{{ btn.add({type:'button',attr: {"data-action": "add-row", "data-table":"template-breakpoint","data-select-id": "template-select-breakpoint" ,"data-target": "admin_template_breakpoints", 'disabled':disabled}}) }}
		</div>
	</div>

	{{ form_widget(form) }}
	{{ form_errors(form) }}

	<table id="template-breakpoint" data-action="table-choices" class="table table-bordered table-striped margin-top-20">
		<thead>
		<tr>
			<th class="col-md-10">{{ 'admin_breakpoint.index.table.header.type'|trans }}</th>
			<th class="col-md-2 text-center">{{ 'cs_core.label.actions'|trans }}</th>
			{#<th>{{ 'admin_breakpoint.index.table.header.min_width'|trans }}</th>#}
			{#<th>{{ 'admin_breakpoint.index.table.header.max_width'|trans }}</th>#}
		</tr>
		</thead>
		<tbody>
		{% for index in form.vars.value %}

			{% set entity = form.vars.choices[index].data %}
			{#{% set index = breakpoint.vars.value %}#}
			{#{% set entity = form.vars.choices[index].data %}#}
			<tr>
				<td>
					{{ entity.name }}
				</td>
				{#<td>#}
					{#{{ entity.minWidth }}#}
				{#</td>#}
				{#<td>#}
					{#{{ entity.maxWidth }}#}
				{#</td>#}
				{#<td>#}
					{#{{ form_widget(breakpoint) }}#}
				{#</td>#}
				<td class="text-center">
					<span class="opts">
						{{ btn.custom('',{
							type: 'link',
							ico:'minus',
							shape: 'circle',
							size:'',
							color:'',
							attr:{
								href: '#',
								class: 'btn-icon-only yellow-gold',
								'data-action': 'remove-row',
								'data-id': entity.id,
								"data-select-id": "template-select-breakpoint",
								"data-target": "admin_template_breakpoints"
							}
						}
						) }}
					</span>
				</td>
			</tr>
		{% endfor %}
		</tbody>
	</table>
{% endblock %}

{% block _admin_template_css_widget %}

	{% import ":Common:buttons.html.twig" as btn %}

	{% set disabled = (form.vars.choices|length == form.vars.value|length) %}

	<div class="row">
		<div class="col-md-10">
			<select id="select_css" {{ (disabled) ? 'disabled="disabled"' }} class="form-control">
				{% for choice in form.vars.choices %}
					<option value="{{ choice.data.id }}" {{ (choice.data.id in form.vars.value)? 'disabled="disabled"' }}>{{ choice.data.name }}</option>
				{% endfor %}
			</select>
		</div>
		<div class="col-md-2">
			{{ btn.add({type:'button',attr: {"data-action": "add-row","data-table":"template-css", "data-select-id": "select_css", "data-target": "admin_template_css",'disabled':disabled}}) }}
		</div>
	</div>

	{{ form_widget(form) }}

	<table id="template-css" class="table table-bordered table-striped margin-top-20">
		<thead>
		<tr>
			<th class="col-md-10">{{ 'admin_template.create.wizard.css_code'|trans }}</th>
			<th class="col-md-2 text-center">{{ 'cs_core.label.actions'|trans }}</th>
		</tr>
		</thead>
		<tbody>
		{% for index in form.vars.value %}
			{% set entity = form.vars.choices[index].data %}
			<tr>
				<td>{{ entity.name }}</td>
				<td class="text-center">
					<span class="opts">
						{{ btn.custom('',{
							type: 'link',
							ico:'minus',
							ico_position:'right',
							shape: 'circle',
							size:'',
							color:'',
							class: 'btn-circle btn-icon-only yellow-gold',
							attr:{
								href: '#',
								'data-action': 'remove-row',
								'data-id': entity.id,
								"data-select-id": "select_css",
								"data-target": "admin_template_css"
							}
							}
						) }}
					</span>
				</td>
			</tr>
		{% endfor %}
		</tbody>
	</table>
{% endblock %}

{% block _admin_template_libraries_widget %}

	{% import ":Common:buttons.html.twig" as btn %}

	{% set disabled = (form.vars.choices|length == form.vars.value|length) %}

	<div class="row">
		<div class="col-md-10">
			<select id="select_libraries" {{ (disabled) ? 'disabled="disabled"' }} class="form-control">
				{% for choice in form.vars.choices %}
					<option value="{{ choice.data.id }}" {{ (choice.data.id in form.vars.value)? 'disabled="disabled"' }}>{{ choice.data.name }}</option>
				{% endfor %}
			</select>
		</div>
		<div class="col-md-2">
			{{ btn.add({type:'button',attr: {"data-action": "add-row","data-table":"template-libraries", "data-select-id": "select_libraries", "data-target": "admin_template_libraries",'disabled':disabled}}) }}
		</div>
	</div>

	{{ form_widget(form) }}

	<table id="template-libraries" class="table table-bordered table-striped margin-top-20">
		<thead>
		<tr>
			<th class="col-md-10">{{ 'admin_template.create.wizard.librariesJS'|trans }}</th>
			<th class="col-md-2 text-center">{{ 'cs_core.label.actions'|trans }}</th>
		</tr>
		</thead>
		<tbody>
		{% for index in form.vars.value %}
			{% set entity = form.vars.choices[index].data %}
			<tr>
				<td>{{ entity.name }}</td>
				<td class="text-center">
					<span class="opts">
						{{ btn.custom('',{
							type: 'link',
							ico:'minus',
							shape: 'circle',
							size:'',
							color:'',
							attr:{
								href: '#',
								class: 'btn-icon-only yellow-gold',
								'data-action': 'remove-row',
								'data-id': entity.id,
								"data-select-id": "select_libraries",
								"data-target": "admin_template_libraries"
							}
						}
						) }}
					</span>
				</td>
			</tr>
		{% endfor %}
		</tbody>
	</table>
{% endblock %}
