{% load static %}
<!-- NDR Template-Tag Inserter Modal -->
<div class="modal fade" id="ndrTagModal" tabindex="-1" aria-labelledby="ndrTagModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="ndrTagModalLabel">
          <i class="fa-solid fa-code"></i> Insert Template Tag
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">

        <!-- Tab navigation -->
        <ul class="nav nav-tabs mb-3" id="ndrTagTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" id="ndr-tab-blocks" data-bs-toggle="tab"
                    data-bs-target="#ndrTabBlocks" type="button" role="tab">
              <i class="fa-solid fa-square"></i> Blocks
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="ndr-tab-elements" data-bs-toggle="tab"
                    data-bs-target="#ndrTabElements" type="button" role="tab">
              <i class="fa-solid fa-window-restore"></i> UI Elements
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="ndr-tab-links" data-bs-toggle="tab"
                    data-bs-target="#ndrTabLinks" type="button" role="tab">
              <i class="fa-solid fa-link"></i> Links
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="ndr-tab-images" data-bs-toggle="tab"
                    data-bs-target="#ndrTabImages" type="button" role="tab">
              <i class="fa-solid fa-image"></i> Images
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="ndr-tab-generated" data-bs-toggle="tab"
                    data-bs-target="#ndrTabGenerated" type="button" role="tab">
              <i class="fa-solid fa-wand-magic-sparkles"></i> Generated
            </button>
          </li>
        </ul>

        <div class="tab-content" id="ndrTagTabContent">

          <!-- ============================================================ -->
          <!-- BLOCKS TAB                                                    -->
          <!-- ============================================================ -->
          <div class="tab-pane fade show active" id="ndrTabBlocks" role="tabpanel">

            <div class="mb-3">
              <label class="form-label fw-bold">Block type</label>
              <div class="d-flex gap-3">
                <div class="form-check">
                  <input class="form-check-input ndr-update" type="radio" name="ndrBlockType"
                         id="ndrBlockTypeBlock" value="block" checked>
                  <label class="form-check-label" for="ndrBlockTypeBlock">Block</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input ndr-update" type="radio" name="ndrBlockType"
                         id="ndrBlockTypeCell" value="cell">
                  <label class="form-check-label" for="ndrBlockTypeCell">Cell</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input ndr-update" type="radio" name="ndrBlockType"
                         id="ndrBlockTypeCode" value="code">
                  <label class="form-check-label" for="ndrBlockTypeCode">Code</label>
                </div>
              </div>
            </div>

            <!-- Block options -->
            <div id="ndrBlockOptions">
              <div class="mb-3">
                <label for="ndrBlockTitle" class="form-label">Title <span class="text-muted">(optional)</span></label>
                <input type="text" class="form-control ndr-update" id="ndrBlockTitle" placeholder="My Section">
              </div>
              <div class="mb-2">
                <div class="form-check">
                  <input class="form-check-input ndr-update" type="checkbox" id="ndrBlockCollapsible">
                  <label class="form-check-label" for="ndrBlockCollapsible">Collapsible</label>
                </div>
              </div>
              <div class="mb-3">
                <div class="form-check">
                  <input class="form-check-input ndr-update" type="checkbox" id="ndrBlockBackToTop">
                  <label class="form-check-label" for="ndrBlockBackToTop">Back-to-top button</label>
                </div>
              </div>
            </div>

            <!-- Cell options -->
            <div id="ndrCellOptions" style="display:none;">
              <div class="mb-3">
                <label for="ndrCellWidth" class="form-label">Width <span class="text-muted">(optional)</span></label>
                <input type="text" class="form-control ndr-update" id="ndrCellWidth" placeholder="e.g. 40%, col-md-6">
                <div class="mt-2 d-flex flex-wrap gap-1">
                  <button type="button" class="btn btn-sm btn-outline-secondary ndr-preset" data-target="ndrCellWidth" data-value="50%">50%</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary ndr-preset" data-target="ndrCellWidth" data-value="40%">40%</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary ndr-preset" data-target="ndrCellWidth" data-value="33%">33%</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary ndr-preset" data-target="ndrCellWidth" data-value="25%">25%</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary ndr-preset" data-target="ndrCellWidth" data-value="col-md-6">col-md-6</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary ndr-preset" data-target="ndrCellWidth" data-value="col-md-4">col-md-4</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary ndr-preset" data-target="ndrCellWidth" data-value="col-md-3">col-md-3</button>
                </div>
              </div>
            </div>

            <!-- Code options -->
            <div id="ndrCodeOptions" style="display:none;">
              <div class="mb-3">
                <label for="ndrCodeLang" class="form-label">Language</label>
                <select class="form-select ndr-update" id="ndrCodeLang">
                  <option value="">— none —</option>
                  <option value="python">Python</option>
                  <option value="javascript">JavaScript</option>
                  <option value="json">JSON</option>
                  <option value="html">HTML</option>
                  <option value="css">CSS</option>
                  <option value="bash">Bash / Shell</option>
                  <option value="sql">SQL</option>
                  <option value="xml">XML</option>
                  <option value="text">Plain text</option>
                </select>
              </div>
            </div>

            <p class="text-muted small mb-0">
              <i class="fa-solid fa-info-circle"></i>
              If text is selected in the editor it will be wrapped. Otherwise both markers are inserted at the cursor.
            </p>
          </div><!-- /ndrTabBlocks -->

          <!-- ============================================================ -->
          <!-- UI ELEMENTS TAB                                               -->
          <!-- ============================================================ -->
          <div class="tab-pane fade" id="ndrTabElements" role="tabpanel">
            <div class="mb-3">
              <label for="ndrElement" class="form-label fw-bold">Element</label>
              {% if ui_elements %}
                <select class="form-select ndr-update" id="ndrElement">
                  <option value="">— choose an element —</option>
                  {% regroup ui_elements by get_type_display as element_groups %}
                  {% for group in element_groups %}
                    <optgroup label="{{ group.grouper }}">
                      {% for el in group.list %}
                        <option value="{{ el.name }}">{{ el.name }}{% if el.label %} — {{ el.label }}{% endif %}</option>
                      {% endfor %}
                    </optgroup>
                  {% endfor %}
                </select>
              {% else %}
                <p class="text-muted">No UI elements found. <a href="{% url 'ndr_core:configure_ui_elements' %}">Create one first.</a></p>
              {% endif %}
            </div>
          </div><!-- /ndrTabElements -->

          <!-- ============================================================ -->
          <!-- LINKS TAB                                                     -->
          <!-- ============================================================ -->
          <div class="tab-pane fade" id="ndrTabLinks" role="tabpanel">

            <ul class="nav nav-pills mb-3" id="ndrLinkTypeTabs">
              <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="pill"
                        data-bs-target="#ndrLinkInternal" type="button">Internal page</button>
              </li>
              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="pill"
                        data-bs-target="#ndrLinkExternal" type="button">External URL</button>
              </li>
              <li class="nav-item">
                <button class="nav-link" data-bs-toggle="pill"
                        data-bs-target="#ndrLinkFile" type="button">File</button>
              </li>
            </ul>

            <div class="tab-content">

              <!-- Internal page -->
              <div class="tab-pane fade show active" id="ndrLinkInternal">
                <div class="mb-3">
                  <label for="ndrLinkPage" class="form-label">Page</label>
                  {% if pages %}
                    <select class="form-select ndr-update" id="ndrLinkPage">
                      <option value="">— choose a page —</option>
                      {% for page in pages %}
                        <option value="{{ page.view_name }}">{{ page.name }} ({{ page.view_name }})</option>
                      {% endfor %}
                    </select>
                  {% else %}
                    <p class="text-muted">No pages found.</p>
                  {% endif %}
                </div>
                {% include "ndr_core/admin_views/ndr_tag_link_style.html" with prefix="ndrPage" %}
                <div class="mb-3">
                  <label for="ndrPageLabel" class="form-label">Label <span class="text-muted">(optional — defaults to page title)</span></label>
                  <input type="text" class="form-control ndr-update" id="ndrPageLabel" placeholder="Click here">
                </div>
              </div>

              <!-- External URL -->
              <div class="tab-pane fade" id="ndrLinkExternal">
                <div class="mb-3">
                  <label for="ndrExtUrl" class="form-label">URL</label>
                  <input type="url" class="form-control ndr-update" id="ndrExtUrl" placeholder="https://example.com">
                </div>
                {% include "ndr_core/admin_views/ndr_tag_link_style.html" with prefix="ndrExt" %}
                <div class="mb-3">
                  <label for="ndrExtLabel" class="form-label">Label</label>
                  <input type="text" class="form-control ndr-update" id="ndrExtLabel" placeholder="Visit site">
                </div>
              </div>

              <!-- File -->
              <div class="tab-pane fade" id="ndrLinkFile">
                <div class="mb-3">
                  <label for="ndrFileUpload" class="form-label">File</label>
                  {% if uploads %}
                    <select class="form-select ndr-update" id="ndrFileUpload">
                      <option value="">— choose a file —</option>
                      {% for upload in uploads %}
                        <option value="{{ upload.pk }}">{{ upload }}</option>
                      {% endfor %}
                    </select>
                  {% else %}
                    <p class="text-muted">No uploads found. <a href="{% url 'ndr_core:configure_uploads' %}">Upload a file first.</a></p>
                  {% endif %}
                </div>
                <div class="mb-3">
                  <label for="ndrFileLabel" class="form-label">Label <span class="text-muted">(optional)</span></label>
                  <input type="text" class="form-control ndr-update" id="ndrFileLabel" placeholder="Download">
                </div>
              </div>

            </div>
          </div><!-- /ndrTabLinks -->

          <!-- ============================================================ -->
          <!-- IMAGES TAB                                                    -->
          <!-- ============================================================ -->
          <div class="tab-pane fade" id="ndrTabImages" role="tabpanel">
            <div class="mb-3">
              <label for="ndrImage" class="form-label fw-bold">Image</label>
              {% if images %}
                <select class="form-select ndr-update" id="ndrImage">
                  <option value="">— choose an image —</option>
                  {% for img in images %}
                    <option value="{{ img.pk }}" data-url="{{ img.image.url }}">
                      #{{ img.pk }}{% if img.alt_text %} — {{ img.alt_text }}{% endif %}
                    </option>
                  {% endfor %}
                </select>
                <div id="ndrImagePreviewBox" class="mt-2 d-none">
                  <img id="ndrImageThumb" src="" alt="" class="img-thumbnail" style="max-height:120px;">
                </div>
              {% else %}
                <p class="text-muted">No images found. <a href="{% url 'ndr_core:configure_images' %}">Upload an image first.</a></p>
              {% endif %}
            </div>
            <div class="row g-2">
              <div class="col-6">
                <label for="ndrImageWidth" class="form-label">Max width <span class="text-muted">(px, optional)</span></label>
                <input type="number" class="form-control ndr-update" id="ndrImageWidth" placeholder="e.g. 400" min="1">
              </div>
              <div class="col-6">
                <label for="ndrImageAlt" class="form-label">Alt text <span class="text-muted">(optional)</span></label>
                <input type="text" class="form-control ndr-update" id="ndrImageAlt" placeholder="overrides stored alt text">
              </div>
            </div>
          </div><!-- /ndrTabImages -->

          <!-- ============================================================ -->
          <!-- GENERATED TAB                                                 -->
          <!-- ============================================================ -->
          <div class="tab-pane fade" id="ndrTabGenerated" role="tabpanel">

            <div class="mb-3">
              <div class="form-check">
                <input class="form-check-input ndr-update" type="radio" name="ndrGenType"
                       id="ndrGenToc" value="toc" checked>
                <label class="form-check-label" for="ndrGenToc">
                  <strong>Table of Contents</strong>
                  <span class="text-muted d-block small">Auto-generated from titled blocks on this page.</span>
                </label>
              </div>
              <div class="form-check mt-2">
                <input class="form-check-input ndr-update" type="radio" name="ndrGenType"
                       id="ndrGenSetting" value="setting">
                <label class="form-check-label" for="ndrGenSetting">
                  <strong>Setting value</strong>
                  <span class="text-muted d-block small">Insert the current value of a site setting.</span>
                </label>
              </div>
            </div>

            <div id="ndrSettingPicker" style="display:none;">
              <label for="ndrSetting" class="form-label">Setting</label>
              {% if settings %}
                <select class="form-select ndr-update" id="ndrSetting">
                  <option value="">— choose a setting —</option>
                  {% for setting in settings %}
                    <option value="{{ setting.value_name }}">{{ setting.value_label }}</option>
                  {% endfor %}
                </select>
              {% else %}
                <p class="text-muted">No string settings found.</p>
              {% endif %}
            </div>

          </div><!-- /ndrTabGenerated -->

        </div><!-- /tab-content -->

        <!-- Live preview -->
        <div class="mt-3 p-2 rounded border bg-light">
          <span class="text-muted small">Generated tag:</span>
          <code id="ndrTagPreview" class="d-block mt-1 text-break" style="min-height:1.4em;"></code>
        </div>

      </div><!-- /modal-body -->

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="ndrTagInsertBtn">
          <i class="fa-solid fa-plus"></i> Insert
        </button>
      </div>

    </div>
  </div>
</div>