{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <button type="button" id="button-send" class="btn btn-primary"><i class="fa-solid fa-envelope"></i> {{ button_send }}</button></div>
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    <div class="card">
      <div class="card-header"><i class="fa-solid fa-envelope"></i> {{ text_mail }}</div>
      <div class="card-body">
        <form>
          <div class="row mb-3">
            <label for="input-store" class="col-sm-2 col-form-label">{{ entry_store }}</label>
            <div class="col-sm-10">
              <select name="store_id" id="input-store" class="form-select">
                {% for store in stores %}
                  <option value="{{ store.store_id }}">{{ store.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="row mb-3">
            <label for="input-to" class="col-sm-2 col-form-label">{{ entry_to }}</label>
            <div class="col-sm-10">
              <select name="to" id="input-to" class="form-select">
                <option value="newsletter">{{ text_newsletter }}</option>
                <option value="customer_all">{{ text_customer_all }}</option>
                <option value="customer_group">{{ text_customer_group }}</option>
                <option value="customer">{{ text_customer }}</option>
                <option value="affiliate_all">{{ text_affiliate_all }}</option>
                <option value="affiliate">{{ text_affiliate }}</option>
                <option value="product">{{ text_product }}</option>
              </select>
            </div>
          </div>
          <div class="row mb-3 to" id="to-customer-group">
            <label for="input-customer-group" class="col-sm-2 col-form-label">{{ entry_customer_group }}</label>
            <div class="col-sm-10">
              <select name="customer_group_id" id="input-customer-group" class="form-select">
                {% for customer_group in customer_groups %}
                  <option value="{{ customer_group.customer_group_id }}">{{ customer_group.name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="row mb-3 to" id="to-customer">
            <label class="col-sm-2 col-form-label">{{ entry_customer }}</label>
            <div class="col-sm-10">
              <input type="text" name="customers" value="" placeholder="{{ entry_customer }}" id="input-customer" data-oc-target="autocomplete-customer" class="form-control" autocomplete="off"/>
              <ul id="autocomplete-customer" class="dropdown-menu"></ul>
              <div class="form-control p-0" style="height: 150px; overflow: auto;">
                <table id="mail-customer" class="table m-0">
                  <tbody></tbody>
                </table>
              </div>
              <div class="form-text">{{ help_customer }}</div>
            </div>
          </div>
          <div class="row mb-3 to" id="to-affiliate">
            <label class="col-sm-2 col-form-label">{{ entry_affiliate }}</label>
            <div class="col-sm-10">
              <input type="text" name="affiliates" value="" placeholder="{{ entry_affiliate }}" id="input-affiliate" data-oc-target="autocomplete-affiliate" class="form-control" autocomplete="off"/>
              <ul id="autocomplete-affiliate" class="dropdown-menu"></ul>
              <div class="form-control p-0" style="height: 150px; overflow: auto;">
                <table id="mail-affiliate" class="table m-0">
                  <tbody></tbody>
                </table>
              </div>
              <div class="form-text">{{ help_affiliate }}</div>
            </div>
          </div>
          <div class="row mb-3 to" id="to-product">
            <label class="col-sm-2 col-form-label">{{ entry_product }}</label>
            <div class="col-sm-10">
              <input type="text" name="products" value="" placeholder="{{ entry_product }}" id="input-product" data-oc-target="autocomplete-product" class="form-control" autocomplete="off"/>
              <ul id="autocomplete-product" class="dropdown-menu"></ul>
              <div class="form-control p-0" style="height: 150px; overflow: auto;">
                <table id="mail-product" class="table m-0">
                  <tbody></tbody>
                </table>
              </div>
              <div class="form-text">{{ help_product }}</div>
            </div>
          </div>
          <div class="row mb-3">
            <label for="input-subject" class="col-sm-2 col-form-label">{{ entry_subject }}</label>
            <div class="col-sm-10">
              <input type="text" name="subject" value="" placeholder="{{ entry_subject }}" id="input-subject" class="form-control" required/>
              <div id="error-subject" class="invalid-feedback"></div>
            </div>
          </div>
          <div class="row mb-3">
            <label for="input-message" class="col-sm-2 col-form-label">{{ entry_message }}</label>
            <div class="col-sm-10">
              <div id="input-message">
                <textarea name="message" placeholder="{{ entry_message }}" data-oc-toggle="ckeditor" data-lang="{{ ckeditor }}" class="form-control" required></textarea>
                <div id="error-message" class="invalid-feedback"></div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="view/javascript/contact.js"></script>
{{ footer }}
