{{ header }}
<div class="background-white bottom-margin-large">
	<div class="container-fluid">
		<div class="row no-space-xs middle-xs">
			<div class="col-xs-12 col-sm col-md">
				<div class="content-box vertical-padding-large">
					<span class="text-x-large text-dark">{{ heading_title }}</span>
					<div class="adm-breadcrumb">
						{% for breadcrumb in breadcrumbs %}
							<i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
							<a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
						{% endfor %}
					</div>
				</div>
			</div>
			<div class="col-xs-12 col-sm-width-auto col-md-width-auto">
				<div class="content-box vertical-padding-large flex flex-row middle-xs">
					<a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
						<span>{{ button_cancel }}</span>
					</a>
					<a class="btn-default btn-medium btn-primary js-submit-main-form">
						<span>{{ button_save }}</span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>


<form action="{{ action }}" method="post" class="js-main-form">
	<div class="container-fluid">
    {% if error_warning %}
      <div class="text-error border-error background-error padding-large bottom-margin-large rounded-large full-width">{{ error_warning }}</div>
    {% endif %}
    {% if success %}
      <div class="text-success border-success background-success padding-large bottom-margin-large rounded-large full-width">{{ success }}</div>
    {% endif %}
		<div class="row">
			<div class="col-xs-12">
				<div class="content-box background-white shadow-small padding-large">
					<div class="row">
						<div class="col-xs-12 col-md-5">
							<label class="field field-medium">
								<span class="field-label">{{ text_title }}</span>
								<input type="text" name="starter_kit_title" class="field-entry" value="{{ starter_kit_title }}" minlength="3" maxlength="64">
							</label>
						</div>
						<div class="col-xs-12 col-md-5">
							<label class="field field-medium">
								<span class="field-label">{{ entry_product }}</span>
								<input type="text" name="product" class="field-entry" value="">
							</label>
						</div>
            <div class="col-xs-12 col-md-2">
              <label class="field field-medium">
                <span class="field-label">{{ entry_status }}</span>
                <select class="field-entry" name="starter_kit_status">
                  {% for key, value in Type_Status.getEnumList() %}
                    <option value="{{key}}" {{ ftr_geral.isSelected(key, starter_kit_status|default(Type_Status.Tp_Habilitado)) }}>{{ value }}</option>
                  {% endfor %}
                </select>
              </label>
            </div>

						<div class="col-xs-12">
							<div id="starter_kit-product" class="scrollbox field-entry">
								{% for product in products %}
									<div id="starter_kit-product{{ product.product_id }}" class="scrollbox-item flex between-xs">
										<span class="text-small text-dark">{{ product.name }}</span>
										<i class="fas fa-trash-alt text-small right-margin-small text-error cursor-pointer"></i>
										<input type="hidden" value="{{ product.product_id }}">
									</div>
								{% endfor %}
							</div>
							<input type="hidden" name="starter_kit_product" value="{{ starter_kit_product }}">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</form>

<script>
	language.add({{ languageForJS|json_encode() }});
	const TOKEN = '{{ token }}';
</script>

{{ footer }}
