{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs">
          <div>
            <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>
          <a id="button-send" class="btn-default btn-medium btn-primary">
            <span>{{ button_send }}</span>
          </a>
          </div>
        </div>
      </div>
      <div class="box"></div>
    </div>
  </div>
</header>
<div class="container-fluid">
  <div id="mail" class="row">
    <div class="col-xs-12 col-md-8">
      <div class="background-white shadow-small padding-large">
        <div class="content-box bottom-margin-large">
          <label class="field field-medium">
            <span class="field-label required">{{ entry_subject }}</span>
            <input class="field-entry" type="text" name="subject" value="" />
          </label>
        </div>
        <div class="content-box bottom-margin-large">
          <label class="field field-medium">
            <span class="field-label required">{{ entry_message }}</span>
            <textarea class="field-entry" id="message" name="message"></textarea>
          </label>
        </div>
        <div class="content-box">
          {% if Type_ContactVarButtons %}
            <span class="visible-block text-small text-bold text-dark bottom-margin-small">{{ text_inserir }}</span>
            <div class="flex">
              {% for key, value in Type_ContactVarButtons %}
                <button type="button" class="btn-default btn-small right-margin-small bottom-margin-small js-variables" data-variable-name="{{ key }}">
                  <span>{{ value }}</span>
                </button>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="background-white shadow-small padding-large">
        <div class="content-box bottom-padding-large">
          <label class="field field-medium">
            <span class="field-label">{{ entry_store }}</span>
            <select class="field-entry" name="store_id">
              <option value="0">{{ text_default }}</option>
              {% for store in stores %}
                <option value="{{ store.store_id }}">{{ store.name }}</option>
              {% endfor %}
            </select>
          </label>
        </div>
        <div class="content-box">
          <label class="field field-medium">
            <span class="field-label">{{ entry_to }}</span>
            <select class="field-entry" name="to">
              {% for type_contact in type_contacts %}
                <option value="{{ type_contact.id }}" >{{ type_contact.name }}</option>
              {% endfor %}
            </select>
            <button class="btn-default btn-medium-square btn-primary js-btn-csv padding-medium top-margin-small">{{ button_csv }}</button>
          </label>
        </div>
        <div id="to-customer-group" class="content-box bottom-padding-large to">
          <label class="field field-medium">
            <span class="field-label">{{ entry_customer_group }}</span>
            <select class="field-entry" name="customer_group_id">
              {% for customer_group in customer_groups %}
                <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name }}</option>
              {% endfor %}
            </select>
          </label>
        </div>
        <div id="to-customer" class="content-box top-padding-large to">
          <label class="field field-medium bottom-padding-large">
            <span class="field-label">{{ entry_customer }}</span>
            <input class="field-entry" type="text" name="customers" value="" placeholder="informe o nome do cliente"/>
          </label>
          <div id="customer" class="scrollbox field-entry"></div>
        </div>
        <div id="to-product" class="content-box top-padding-large to">
          <label class="field field-medium bottom-padding-large">
            <span class="field-label">{{ entry_product }}</span>
            <input class="field-entry" type="text" name="products" value="" placeholder="informe o nome do produto"/>
          </label>
          <div id="product" class="scrollbox field-entry"></div>
        </div>

      </div>
    </div>
  </div>
</div>
{{ footer }}
