{% extends "public/base.html" %}
{% load static %}
{% block title %}Premium Domains — {{ site.site_name }}{% endblock %}
{% block meta_description %}Premium domain names available to buy or reserve. Short, memorable and ready to transfer.{% endblock %}

{% block extra_head %}
<style>
.dom-status { display:inline-block;border-radius:99px;padding:.2rem .6rem;font-size:.65rem;font-weight:700;margin-top:.35rem; }
.dom-status.reserved { background:#fff4e5;color:#a15c00;border:1px solid #a15c0033; }
.dom-status.sold { background:#f1f1f1;color:#666;border:1px solid #66666633; }
.dom-buy { display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;flex-wrap:wrap; }
.dom-amount { color:#fff!important;font-weight:700;font-size:1.35rem;line-height:1.2;white-space:nowrap; }
.dom-cta { flex-shrink:0;white-space:nowrap; }
.dom-cta-wide { width:100%;text-align:center; }
@media (max-width:767px){.banner-inner-content h1{white-space:nowrap;font-size:min(2.1rem,7.6vw)}}
</style>
{% endblock %}

{% block content %}
<div class="section-first-inner">
  <div class="section compact-bottom">
    <div class="hero-container">
      <div class="banner-inner" style="justify-content:flex-start;align-items:flex-end;flex-wrap:wrap">
        <div class="banner-inner-content" style="text-align:left">
          <h1>Premium Domains</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <div class="hero-container">
      <div class="d-flex flex-column gspace-2">
        {% if listings %}
        <div class="row row-cols-lg-4 row-cols-md-2 row-cols-1 grid-spacer-2" id="cardsRow">
          {% include "public/partials/domain_cards.html" %}
        </div>
        <div class="text-center mt-4" id="loadMoreWrap">
          {% if listings.has_next %}
          <button class="btn btn-accent-outline" id="loadMoreBtn" data-next-page="{{ listings.next_page_number }}">Load More</button>
          {% endif %}
        </div>
        {% else %}
        <div class="text-center py-5">
          <p class="secondary-accent">No domains available yet. Check back soon.</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  var grid = document.getElementById('cardsRow');
  var btn  = document.getElementById('loadMoreBtn');
  if (!btn) return;
  btn.addEventListener('click', function () {
    var u = new URL(window.location.href);
    u.searchParams.set('page', btn.dataset.nextPage);
    u.searchParams.set('partial', '1');
    btn.disabled = true;
    fetch(u.toString()).then(function(r){return r.text();}).then(function(h){
      var o = grid.querySelector('#load-more-sentinel');
      if (o) o.remove();
      var t = document.createElement('div');
      t.innerHTML = h;
      var s = t.querySelector('#load-more-sentinel');
      if (s) s.remove();
      grid.insertAdjacentHTML('beforeend', t.innerHTML);
      if (s) { btn.dataset.nextPage = s.dataset.nextPage; btn.disabled = false; }
      else { document.getElementById('loadMoreWrap').style.display = 'none'; }
    });
  });
});
</script>
{% endblock %}