{* Vanity parent domains tab (deployment_mode='vanity').
   The provider OWNS these domains and pre-configures them on HestiaCP. The
   module sells {name}.{domain} sites + {name}@{domain} mailboxes on them.
   Each row records the ONE mail server + provider mail user, and (push mode)
   the DNS server + provider DNS user that hold the existing zone.
   The module never creates/deletes the parent domain, zone, or provider user. *}

{if $is_new}
    <div class="alert alert-info">
        <i class="fa fa-info-circle"></i> Save the group first (General tab), then you can add vanity domains.
    </div>
{else}
<div class="puq-vanity-tab">

    <div class="alert alert-warning" style="font-size:12px;">
        <i class="fa fa-shield-alt"></i>
        <strong>Vanity mode is destructive-safe by design.</strong> The module only adds/removes
        the per-service subdomain, ONE mailbox, and (push mode) ONE DNS record. It never touches the
        parent mail domain, the DNS zone, or your provider Hestia user. Make sure the provider mail
        user below already owns the mail domain on HestiaCP before selling slots on it.
    </div>

    <div class="row" style="margin-bottom:10px;">
        <div class="col-md-8">
            <strong><i class="fa fa-at"></i> Sellable parent domains</strong>
            <span class="text-muted small" id="puq-vanity-stats"></span>
        </div>
        <div class="col-md-4 text-right">
            <button type="button" class="btn btn-primary btn-sm" id="puq-vanity-add">
                <i class="fa fa-plus"></i> Add domain
            </button>
        </div>
    </div>

    <table class="table table-condensed table-hover" id="puq-vanity-table" style="background:#fff;">
        <thead>
            <tr>
                <th>Domain</th>
                <th>Mail server / user</th>
                <th>DNS</th>
                <th>TTL</th>
                <th>Status</th>
                <th>In use</th>
                <th style="width:90px;"></th>
            </tr>
        </thead>
        <tbody>
            <tr><td colspan="7" class="text-muted text-center"><i class="fa fa-spinner fa-spin"></i> Loading…</td></tr>
        </tbody>
    </table>

    <p class="text-muted small">
        For each domain you sell, create a WHMCS <strong>Configurable Option</strong> named
        <code>vanity_domain</code> on the product, whose option values are exactly these domain strings,
        and a product <strong>Custom Field</strong> named <code>vanity_name</code> for the buyer's name.
        Set the product Deployment mode to <strong>Vanity</strong> and bind it to this group.
    </p>
</div>

{* ============ Add / Edit vanity-domain modal ============ *}
<div class="modal fade" id="puq-vanity-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="puq-vanity-modal-title">Vanity domain</h4>
      </div>
      <div class="modal-body">
        <form id="puq-vanity-form">
          <input type="hidden" id="puq-vanity-id" value="0">

          <div class="form-group">
            <label>Parent domain <span class="text-danger">*</span></label>
            <input type="text" id="puq-vanity-domain" class="form-control input-sm" placeholder="example.com" autocomplete="off">
            <span class="help-block small">The domain you own. Sold as <code>name.&lt;domain&gt;</code> (site) + <code>name@&lt;domain&gt;</code> (mailbox).</span>
          </div>

          <hr>
          <p><strong><i class="fa fa-envelope"></i> Mail (required)</strong></p>
          <div class="row">
            <div class="col-md-6 form-group">
              <label>Mail server <span class="text-danger">*</span></label>
              <select id="puq-vanity-mail-server" class="form-control input-sm"></select>
            </div>
            <div class="col-md-6 form-group">
              <label>Provider mail username <span class="text-danger">*</span></label>
              <input type="text" id="puq-vanity-mail-username" class="form-control input-sm" placeholder="provider" autocomplete="off">
            </div>
          </div>
          <div class="form-group">
            <label>Mail domain <small class="text-muted">(blank = parent domain)</small></label>
            <input type="text" id="puq-vanity-mail-domain" class="form-control input-sm" placeholder="(same as parent domain)" autocomplete="off">
          </div>

          <hr>
          <p><strong><i class="fa fa-network-wired"></i> DNS for the subdomain</strong></p>
          <div class="form-group">
            <label>DNS mode</label>
            <select id="puq-vanity-dns-mode" class="form-control input-sm">
              <option value="external">External / wildcard — module touches no DNS</option>
              <option value="push">Push — module adds/removes the subdomain A record</option>
            </select>
            <span class="help-block small">
              <strong>External:</strong> you maintain a wildcard <code>*.domain</code> or manage DNS yourself.
              <strong>Push:</strong> the module writes the <code>name</code> A/AAAA record into your existing zone.
            </span>
          </div>
          <div id="puq-vanity-dns-push" style="display:none;">
            <p class="text-muted small" style="margin-bottom:6px;">
              The record is pushed to the group's DNS servers (the <em>DNS servers</em> tab).
              Provide the provider DNS user that owns the zone there.
            </p>
            <div class="row">
              <div class="col-md-6 form-group">
                <label>Provider DNS username <span class="text-danger">*</span></label>
                <input type="text" id="puq-vanity-dns-username" class="form-control input-sm" placeholder="provider" autocomplete="off">
              </div>
              <div class="col-md-3 form-group">
                <label>DNS zone <small class="text-muted">(blank = domain)</small></label>
                <input type="text" id="puq-vanity-dns-zone" class="form-control input-sm" placeholder="(same as domain)" autocomplete="off">
              </div>
              <div class="col-md-3 form-group">
                <label>Record TTL (s)</label>
                <input type="number" id="puq-vanity-ttl" class="form-control input-sm" value="3600" min="60" max="86400">
              </div>
            </div>
          </div>

          <hr>
          <p><strong><i class="fa fa-server"></i> Web servers</strong>
             <small class="text-muted">— which servers may host this domain's sites (least-loaded is picked at order time)</small></p>
          <div id="puq-vanity-web-list" class="puq-vanity-web-list" style="max-height:160px;overflow:auto;border:1px solid #e0e6ee;border-radius:3px;padding:6px 10px;background:#fff;">
            <div class="text-muted small">No web servers configured. Add one on the Web Servers page first.</div>
          </div>
          <span class="help-block small">Leave empty only for a mail-only vanity product. Otherwise tick at least one.</span>

          <hr>
          <div class="row">
            <div class="col-md-6 form-group">
              <label>Status</label>
              <select id="puq-vanity-status" class="form-control input-sm">
                <option value="active">Active (sellable)</option>
                <option value="inactive">Inactive (hidden)</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label>Notes</label>
            <input type="text" id="puq-vanity-notes" class="form-control input-sm" maxlength="1000" autocomplete="off">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary" id="puq-vanity-save"><i class="fa fa-save"></i> Save</button>
      </div>
    </div>
  </div>
</div>
{/if}
