{% extends "layouts/app.twig" %}

{% block title %}{{ __('Manage Reserved Names') }}{% endblock %}

{% block content %}
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <!-- Page pre-title -->
                <div class="page-pretitle">
                  {{ __('Overview') }}
                </div>
                <h2 class="page-title">
                  {{ __('Manage Reserved Names') }}
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="col-12">
            {% include 'partials/flash.twig' %}
              <div class="card">
               <form action="/registry/reserved" method="post">
               {{ csrf.field | raw }}
                <div class="card-header">
                    <h4 class="card-title">{{ __('Manage Reserved Names') }}</h4>
                </div>
                <div class="card-body">
                {% for type, names in categories %}
                    <div class="card mb-3">
                        <div class="card-header">
                          <h3 class="card-title">{{ type|capitalize }} Names <span class="card-subtitle"><span class="line-count">0</span> {{ __('lines') }}</span></h3>
                        </div>
                        <div class="card-body">
                            {% if names is not empty %}
                                <textarea class="form-control countable" name="domains_{{ type }}" rows="4" placeholder="Enter domain names, one per line">{{ names|join('\n') }}</textarea>
                            {% else %}
                                <textarea class="form-control countable" name="domains_{{ type }}" rows="4" placeholder="No {{ type|lower }} names. Enter new names, one per line"></textarea>
                            {% endif %}
                            <small class="form-hint">
                                <strong>{{ type|capitalize }} Names:</strong> {{ __('These domain names are subject to special regulations or registration requirements. They might be available for registration but under specific conditions, such as proof of eligibility or additional documentation. ') }}
                                <br><em>{{ __('Enter each') }} {{ type }} {{ __('name on a new line, without the extension. For instance, use "example" in place of "example.com".') }}</em>
                            </small>
                        </div>
                    </div>
                {% endfor %}
                </div>
                <div class="card-footer">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <button type="submit" class="btn btn-primary">{{ __('Update Reserved Names') }}</button>
                    </div>
                  </div>
                 </form>
                </div>
              </div>
            </div>
          </div>
        </div>
        {% include 'partials/footer.twig' %}
      </div>
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Function to count lines in a textarea
  function countLines(text) {
    return text.trim().split(/\r\n|\r|\n/).filter(line => line.trim() !== "").length;
  }

  // Update the count for all textareas with class "countable"
  function updateLineCounts() {
    document.querySelectorAll('.countable').forEach(function (textarea) {
      const lineCount = countLines(textarea.value);

      // Locate the 'line-count' in the card-header
      const cardHeader = textarea.closest('.card').querySelector('.card-header .line-count');
      if (cardHeader) {
        cardHeader.textContent = lineCount;
      }
    });
  }

  // Attach event listeners to dynamically update the counts
  document.querySelectorAll('.countable').forEach(function (textarea) {
    textarea.addEventListener('input', updateLineCounts);
  });

  // Initial count update
  updateLineCounts();
});
</script>
{% endblock %}