{% extends "base.html" %}
{% load static domain_tags %}

{% block title %}Dashboard – {{ site.domain }}{% endblock %}

{% block extra_head %}
<style>
.dash {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}
.dash-layout {
  align-items: start;
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}
.dash-grid {
  columns: 1;
  column-gap: 20px;
}
.dash-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
  break-inside: avoid;
  display: inline-block;
  margin: 0 0 20px;
  width: 100%;
}
.dash-card__header {
  background: #f5f5f5;
  padding: 12px 16px;
  font-weight: 600;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.dash-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.dash-card__body {
  padding: 16px;
}
/* Profile card */
.dash-profile {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.dash-profile__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #eee;
}
.dash-profile__avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.8em;
  color: #999;
}
.dash-profile__info {
  flex: 1;
  min-width: 0;
}
.dash-profile__name {
  font-weight: 600;
  margin-bottom: 4px;
}
.dash-profile__desc {
  font-size: 0.9em;
  color: #555;
  margin: 4px 0 0;
}
.dash-profile-media {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.dash-profile-media__preview {
  background: #eee;
  border-radius: 50%;
  height: 64px;
  overflow: hidden;
  width: 64px;
}
.dash-profile-media__preview img {
  display: block;
  height: 64px;
  object-fit: cover;
  width: 64px;
}
.dash-list,
.dash-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-list li {
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  gap: 12px;
  padding: 10px 16px;
}
.dash-list li:last-child,
.dash-links li:last-child {
  border-bottom: none;
}
.dash-links li {
  border-bottom: 1px solid #f0f0f0;
}
.dash-links a {
  color: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  text-decoration: none;
}
.dash-links a:hover {
  color: #0066cc;
}
.dash-links i {
  color: #666;
  width: 1.2em;
  text-align: center;
}
.dash-list__thumb {
  background: #eee;
  border-radius: 4px;
  flex-shrink: 0;
  height: 48px;
  object-fit: cover;
  width: 48px;
}
.dash-list__thumb--empty {
  background: #f3f3f3;
}
.dash-list__title {
  flex: 1;
  min-width: 0;
}
.dash-list__title a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.dash-list__title a:hover {
  color: #0066cc;
}
.dash-list__meta {
  color: #666;
  display: block;
  font-size: 0.8em;
  font-weight: 400;
  margin-top: 2px;
}
.dash-empty {
  color: #666;
  margin: 0;
  padding: 16px;
}
@media (min-width: 860px) {
  .dash-layout { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); }
  .dash-grid { columns: 2; }
}
@media (max-width: 700px) {
  .dash { padding: 16px 12px 32px; }
  .dash-card__header { align-items: flex-start; flex-wrap: wrap; }
  .dash-card__body { padding: 14px; }
  .dash-profile { flex-direction: column; }
}
/* Domains list */
.dash-domains {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dash-domains li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.dash-domains li:last-child {
  border-bottom: none;
}
.dash-domains__actions {
  display: flex;
  gap: 10px;
}
/* Edit profile modal */
.dash-profile-edit-wrap {
  margin-top: 12px;
}
.dash-inline-form {
  display: none;
  margin-top: 12px;
}
.dash-inline-form.is-open {
  display: block;
}
.dash-inline-form textarea {
  width: 100%;
  min-height: 80px;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font: inherit;
  resize: vertical;
}
.dash-inline-form label {
  display: block;
  font-size: 0.85em;
  font-weight: 600;
  margin-top: 10px;
}
.dash-inline-form input[type="number"],
.dash-inline-form input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.dash-inline-form__actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.button--small {
  padding: 5px 12px;
  font-size: 0.85em;
}
</style>
{% endblock %}

{% block content %}
<div class="dash">
  <div class="dash-layout">

    <div class="dash-card">
      <div class="dash-card__header">
        Your Domains
        <a href="{% url 'domains:landing' %}" class="button button--small">All domains</a>
      </div>
      <div class="dash-card__body" style="padding: 0 16px;">
        {% if user_domains %}
        <ul class="dash-domains">
          {% for du in user_domains %}
          <li>
            <a href="{% internal_origin du.site.domain %}" target="_blank">{{ du.site.domain }}</a>
            <span class="dash-domains__actions">
              <a href="{% internal_origin du.site.domain %}{% url 'domains:dashboard' %}" class="admin-link" title="Dashboard">
                <i class="fa-solid fa-gauge-high" aria-hidden="true"></i>
              </a>
              {% if du.can_manage_domain %}
              <a href="{% internal_origin du.site.domain %}{% url 'domains:settings_edit' %}" class="admin-link" title="Settings">
                <i class="fa-solid fa-gear" aria-hidden="true"></i>
              </a>
              {% endif %}
            </span>
          </li>
          {% endfor %}
        </ul>
        {% else %}
        <p style="padding: 12px 0; color: #666;">No domains.</p>
        {% endif %}
      </div>
    </div>

    <div class="dash-grid">

    <!-- Profile card -->
    <div class="dash-card" id="dash-profile-card">
      <div class="dash-card__header">
        Your Profile
        <button type="button" class="button button--small" id="dash-profile-edit-btn">Edit</button>
      </div>
      <div class="dash-card__body">
        <div id="dash-profile-display">
          {% include "userprofiles/partials/profile_card.html" with user=request.user user_profile=user_profile %}
        </div>
        <div class="dash-inline-form" id="dash-profile-inline-form">
          {% include "userprofiles/partials/profile_edit_form.html" with profile=user_profile user=request.user %}
        </div>
      </div>
    </div>

    {% if dashboard_extra_links_template %}
    <div class="dash-card">
      <div class="dash-card__header">Manage</div>
      <ul class="dash-links">
        {% include dashboard_extra_links_template %}
      </ul>
    </div>
    {% endif %}

    {% if dashboard_extra_cards_template %}
    {% include dashboard_extra_cards_template %}
    {% endif %}

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

<script>
(function () {
  var editBtn = document.getElementById('dash-profile-edit-btn');
  var inlineForm = document.getElementById('dash-profile-inline-form');
  var display = document.getElementById('dash-profile-display');
  var cancelBtn = inlineForm ? inlineForm.querySelector('.dash-inline-form__cancel') : null;

  function openForm() {
    inlineForm.classList.add('is-open');
    display.style.display = 'none';
    editBtn.textContent = 'Cancel';
    editBtn.removeEventListener('click', openForm);
    editBtn.addEventListener('click', closeForm);
  }
  function closeForm() {
    inlineForm.classList.remove('is-open');
    display.style.display = '';
    editBtn.textContent = 'Edit';
    editBtn.removeEventListener('click', closeForm);
    editBtn.addEventListener('click', openForm);
  }

  if (editBtn) editBtn.addEventListener('click', openForm);

  // AJAX submit for profile form
  if (inlineForm) {
    inlineForm.addEventListener('click', function (e) {
      var choose = e.target.closest('[data-profile-image-action="choose"]');
      var clear = e.target.closest('[data-profile-image-action="clear"]');
      if (!choose && !clear) return;
      e.preventDefault();
      var input = document.getElementById('profile-image-id');
      var preview = inlineForm.querySelector('[data-profile-image-preview]');
      if (clear) {
        if (input) input.value = '';
        if (preview) preview.innerHTML = '';
        return;
      }
      if (!window.openMediaBrowse) return;
      window.openMediaBrowse({
        tab: 'browse',
        lockType: true,
        preselect: { type: 'image' },
        insertLabel: 'Use image',
        onSelect: function (data) {
          if (input) input.value = data.id || '';
          if (preview) {
            preview.innerHTML = data.url
              ? '<img src="' + String(data.url).replace(/"/g, '&quot;') + '" alt="">'
              : '';
          }
        }
      });
    });

    var form = inlineForm.querySelector('form');
    if (form) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        var data = new FormData(form);
        fetch(form.action, { method: 'POST', body: data })
          .then(function (r) { return r.text(); })
          .then(function (html) {
            display.innerHTML = html;
            closeForm();
          });
      });
    }
  }
})();
</script>
{% endblock %}