<%- include('includes/header', { username: admin[0].name, email: admin[0].email }) %>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<div class="body-wrapper">
  <div class="container-fluid">
          <div class="card bg-info-subtle shadow-none position-relative overflow-hidden mb-4">
        <div class="card-body px-4 py-3">
          <div class="row align-items-center">
            <div class="col-md-8 col-sm-7">
              <h4 class="fw-semibold mb-1">Email Template</h4>

            </div>
          </div>

        </div>
      </div>
    <div class="row mt-3">

      <!-- Sidebar Tabs -->
<div class="col-md-3">
  <div class="card h-100 shadow-sm">
    <div class="card-body p-3">
      <h5 class="card-title mb-3 text-center text-primary fw-semibold">Templates</h5>
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <% templates.forEach((template, index) => { %>
          <a class="nav-link <%= index === 0 ? 'active' : '' %> mb-2 rounded" 
             id="v-pills-<%= template.type %>-tab"
             data-bs-toggle="pill"
             href="#v-pills-<%= template.type %>"
             role="tab"
             aria-controls="v-pills-<%= template.type %>"
             aria-selected="<%= index === 0 %>"
             data-type="<%= template.type %>">
             <i class="fas fa-envelope me-2"></i>
   <%=template.type == "website_publish" ? "Website Export" : template.type
                  .replace(/_/g, ' ')
                  .replace(/\b\w/g, c => c.toUpperCase()) %>          </a>
        <% }) %>
      </div>
    </div>
  </div>
</div>


      <!-- Tab Content -->
      <div class="col-md-9">
        <div class="tab-content" id="v-pills-tabContent">
          <% templates.forEach((template, index) => { %>
            <div class="tab-pane fade <%= index === 0 ? 'show active' : '' %>" id="v-pills-<%= template.type %>" role="tabpanel">
              
              <!-- Short Codes -->
<!-- Short Codes -->
<div class="card shadow-sm mb-4">
  <div class="card-header bg-primary text-white d-flex justify-content-between">
    <span>Short Code</span>
    <span>Variables</span>
  </div>
  <div class="table-responsive">
    <table class="table mb-0 align-middle">
      <tbody>
        <% for (let i = 0; i < template.variables.length; i += 2) { %>
          <tr>
            <% for (let j = 0; j < 2; j++) {
                 const item = template.variables[i + j];
                 if (item) { %>
              <td class="w-25">
                <span class="badge bg-light text-dark border copy-var" style="cursor:pointer">
                  {{<%= item %>}}
                </span>
              </td>
              <td class="w-25 text-muted small">
              (  <%= item %>)
              </td>
            <% } else { %>
              <td class="w-25"></td>
              <td class="w-25"></td>
            <% } %>
            <% } %>
          </tr>
        <% } %>
      </tbody>
    </table>
  </div>
</div>


              <!-- Email Template Form -->
              <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">Email Template</div>
                <div class="card-body">
                  <form class="emailTemplateForm">
                    <input type="hidden" name="type" value="<%= template.type %>">

                    <div class="row mb-3">
                      <div class="col-md-8">
                        <label class="form-label fw-semibold">Subject<span class="text-danger">*</span></label>
                        <input type="text" class="form-control form-control-lg subject" name="subject" value="<%= template.subject %>" required>
                      </div>
                    </div>

                    <div class="row mb-3">
                      <div class="col-md-6">
                        <label class="form-label fw-semibold">From Name<span class="text-danger">*</span></label>
                        <input type="text" class="form-control from_name" name="from_name" value="<%= template.from_name %>" required>
                      </div>
                      <div class="col-md-6">
                        <label class="form-label fw-semibold">From Email<span class="text-danger">*</span></label>
                        <input type="email" class="form-control from_email" name="from_email" value="<%= template.from_email %>" required>
                      </div>
                    </div>

                   <div class="mb-3">
                      <label class="form-label fw-semibold">Message Design<span class="text-danger">*</span></label>
                      
                      <!-- Summernote Textarea (Replaces Quill Div) -->
                      <textarea class="summernoteEditor" name="htmlContent"><%= template.htmlContent %></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 btn-lg">Save Template</button>
                  </form>
                </div>
              </div>

            </div>
          <% }) %>
        </div>
      </div>

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

<%- include('includes/allscripts') %>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script src="/js/view/emailtemplatelist.js"></script>
