{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Rewrite rules editor for one website, with one-click presets. {% endcomment %}

{% block title %}Rewrite rules · {{ domain }}{% endblock %}

{% block content %}
<div ng-controller="siteRewriteRulesController" data-domain="{{ domain }}">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Rewrite rules</h1>
      <p class="text-muted mb-0 small">
        <span ng-bind="domain"></span> &middot;
        <a ng-href="/websites/manage?domain={$ domain $}">back to Manage</a>
      </p>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>
  <div class="alert alert-success py-2 px-3" ng-show="successMessage" ng-cloak role="alert">
    <i class="fas fa-circle-check me-1"></i><span ng-bind="successMessage"></span>
  </div>

  <div class="row g-3">
    <div class="col-lg-4">
      <div class="card mb-3">
        <div class="card-header">Presets</div>
        <div class="list-group list-group-flush">
          <div class="list-group-item d-flex justify-content-between align-items-center"
               ng-repeat="preset in presets">
            <div>
              <div class="fw-semibold" ng-bind="preset.label"></div>
              <div class="small text-muted" ng-bind="preset.hint"></div>
            </div>
            <div class="form-check form-switch mb-0">
              <input type="checkbox" class="form-check-input" role="switch"
                     ng-model="presetState[preset.id]"
                     ng-change="togglePreset(preset.id)"
                     ng-disabled="busy">
            </div>
          </div>
        </div>
      </div>
      <p class="small text-muted">
        Presets are stored as marked blocks (<code># cloudpanel:...</code>) below
        your own rules. Keep custom rules above the first such comment so a
        preset toggle never touches them.
      </p>
    </div>

    <div class="col-lg-8">
      <div class="card">
        <div class="card-header">Rule text</div>
        <div class="card-body">
          <textarea class="form-control font-monospace" rows="16"
                    ng-model="rulesText" ng-disabled="busy"
                    spellcheck="false"></textarea>
          <div class="d-flex justify-content-between mt-2">
            <span class="small text-muted"><span ng-bind="rulesText.length"></span> / 262144 characters</span>
            <button type="button" class="btn btn-primary btn-sm" ng-click="save()" ng-disabled="busy">
              <i class="fas fa-floppy-disk me-1"></i>Save
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>window.CP_SITE_DOMAIN = "{{ domain|escapejs }}";</script>
<script src="{% static 'websiteFunctions/siteTools.js' %}"></script>
{% endblock %}