{{ header }}
{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="float-end">
        <button id="restore_default" class="btn btn-warning">{{ button_restore_default }}</button>
        <button form="form-scroll" class="btn btn-primary"><i class="fa fa-save"></i> {{ button_save }}</button>
        <a href="{{ cancel }}" class="btn btn-secondary"><i class="fa fa-reply"></i> {{ button_cancel }}</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">
    {% if success %}
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      <i class="fa fa-check-circle"></i> {{ success }}
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    {% endif %}
    <div class="card">
      <div class="card-header">
        <h3>{{ text_settings }}</h3>
      </div>
      <div class="card-body">
        <form action="{{ action }}" method="post" id="form-scroll">
          <div class="form-group row">
            <label class="col-sm-2 col-form-label">{{ entry_background_color }}</label>
            <div class="col-sm-10">
              <input type="color" name="scroll_background_color" value="{{ scroll_background_color }}" class="form-control" />
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label">{{ entry_text_color }}</label>
            <div class="col-sm-10">
              <input type="color" name="scroll_text_color" value="{{ scroll_text_color }}" class="form-control" />
            </div>
          </div>
          <div class="form-group row">
            <label class="col-sm-2 col-form-label">{{ entry_status }}</label>
            <div class="col-sm-10">
              <select name="scroll_status" class="form-control">
                <option value="1" {{ scroll_status == 1 ? 'selected' : '' }}>{{ text_enabled }}</option>
                <option value="0" {{ scroll_status == 0 ? 'selected' : '' }}>{{ text_disabled }}</option>
              </select>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script>
  document.getElementById('restore_default').addEventListener('click', function() {
    document.querySelector('[name="scroll_background_color"]').value = '#000000';
    document.querySelector('[name="scroll_text_color"]').value = '#FFFFFF';
    document.querySelector('[name="scroll_status"]').value = '1';
    alert('Defaults have been restored!');
  });
</script>
{{ footer }}
