{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <button type="submit" form="form-review" formaction="{{ save }}" data-bs-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa-solid fa-floppy-disk"></i></button>
        <a href="{{ back }}" data-bs-toggle="tooltip" title="{{ button_back }}" class="btn btn-light"><i class="fa-solid fa-reply"></i></a></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-pencil"></i> {{ text_form }}</div>
      <div class="card-body">
        <form id="form-review" action="{{ save }}" method="post" data-oc-toggle="ajax">
          <div class="row mb-3 required">
            <label for="input-author" class="col-sm-2 col-form-label">{{ entry_author }}</label>
            <div class="col-sm-10">
              <input type="text" name="author" value="{{ author }}" placeholder="{{ entry_author }}" id="input-author" class="form-control"/>
              <div id="error-author" class="invalid-feedback"></div>
            </div>
          </div>
          <div class="row mb-3 required">
            <label class="col-sm-2 col-form-label">{{ entry_product }}</label>
            <div class="col-sm-10">
              <input type="text" name="product" value="{{ product }}" placeholder="{{ entry_product }}" id="input-product" data-oc-target="autocomplete-product" class="form-control" autocomplete="off"/>
              <input type="hidden" name="product_id" value="{{ product_id }}" id="input-product-id"/>
              <ul id="autocomplete-product" class="dropdown-menu"></ul>
              <div class="form-text">{{ help_product }}</div>
              <div id="error-product" class="invalid-feedback"></div>
            </div>
          </div>
          <div class="row mb-3 required">
            <label for="input-text" class="col-sm-2 col-form-label">{{ entry_text }}</label>
            <div class="col-sm-10">
              <textarea name="text" rows="8" placeholder="{{ entry_text }}" id="input-text" class="form-control">{{ text }}</textarea>
              <div id="error-text" class="invalid-feedback"></div>
            </div>
          </div>
          <div class="row mb-3 required">
            <label for="input-rating" class="col-sm-2 col-form-label">{{ entry_rating }}</label>
            <div class="col-sm-10">
              <div id="input-rating">
                <div class="form-check form-check-inline">
                  <input type="radio" name="rating" value="1" id="input-rating-1" class="form-check-input"{% if rating == 1 %} checked{% endif %}/> <label for="input-rating-1" class="form-check-label">1</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" name="rating" value="2" id="input-rating-2" class="form-check-input"{% if rating == 2 %} checked{% endif %}/> <label for="input-rating-2" class="form-check-label">2</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" name="rating" value="3" id="input-rating-3" class="form-check-input"{% if rating == 3 %} checked{% endif %}/> <label for="input-rating-3" class="form-check-label">3</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" name="rating" value="4" id="input-rating-4" class="form-check-input"{% if rating == 4 %} checked{% endif %}/> <label for="input-rating-4" class="form-check-label">4</label>
                </div>
                <div class="form-check form-check-inline">
                  <input type="radio" name="rating" value="5" id="input-rating-5" class="form-check-input"{% if rating == 5 %} checked{% endif %}/> <label for="input-rating-5" class="form-check-label">5</label>
                </div>
              </div>
              <div id="error-rating" class="invalid-feedback"></div>
            </div>
          </div>
          <div class="row mb-3">
            <label for="input-date-added" class="col-sm-2 col-form-label">{{ entry_date_added }}</label>
            <div class="col-sm-10 col-md-4">
              <input type="datetime-local" name="date_added" value="{{ date_added }}" placeholder="{{ entry_date_added }}" id="input-date-added" class="form-control"/>
            </div>
          </div>
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label">{{ entry_status }}</label>
            <div class="col-sm-10">
              <div class="form-check form-switch form-switch-lg">
                <input type="hidden" name="status" value="0"/>
                <input type="checkbox" name="status" value="1" id="input-status" class="form-check-input"{% if status %} checked{% endif %}/>
              </div>
            </div>
          </div>
          <input type="hidden" name="review_id" value="{{ review_id }}" id="input-review-id"/>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('#input-product').autocomplete({
    'source': function(request, response) {
        $.ajax({
            url: 'index.php?route=catalog/product.autocomplete&user_token={{ user_token }}&filter_name=' + encodeURIComponent(request),
            dataType: 'json',
            success: function(json) {
                response($.map(json, function(item) {
                    return {
                        label: item['name'],
                        value: item['product_id']
                    }
                }));
            }
        });
    },
    'select': function(item) {
        $('#input-product').val(decodeHTMLEntities(item['label']));
        $('#input-product-id').val(item['value']);
    }
});
//--></script>
{{ footer }}
