{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %} Change a website's owner and/or package. Admin/reseller only. {% endcomment %}

{% block title %}Owner & package · {{ domain }}{% endblock %}

{% block content %}
<div ng-controller="siteOwnerPackageController" data-domain="{{ domain }}">

  <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Owner &amp; package</h1>
      <p class="text-muted mb-0 small">
        <span ng-bind="domain"></span> &middot;
        <a ng-href="/websites/manage?domain={$ domain $}">back to Manage</a>
      </p>
    </div>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-triangle-exclamation me-1"></i><span ng-bind="errorMessage"></span>
  </div>
  <div class="alert alert-success py-2 px-3" ng-show="successMessage" ng-cloak role="alert">
    <i class="fas fa-circle-check me-1"></i><span ng-bind="successMessage"></span>
  </div>

  <div class="card" style="max-width: 32rem;">
    <div class="card-body">
      <div class="mb-3">
        <label class="form-label small text-muted">Current owner</label>
        <div class="fw-semibold" ng-bind="currentOwner"></div>
      </div>
      <div class="mb-3">
        <label class="form-label">New owner</label>
        <select class="form-select" ng-model="selectedOwner">
          <option value="">(keep current)</option>
          <option ng-repeat="name in owners" ng-value="name" ng-bind="name"></option>
        </select>
      </div>

      <hr>

      <div class="mb-3">
        <label class="form-label small text-muted">Current package</label>
        <div class="fw-semibold" ng-bind="currentPackage"></div>
      </div>
      <div class="mb-3">
        <label class="form-label">New package</label>
        <select class="form-select" ng-model="selectedPackage">
          <option value="">(keep current)</option>
          <option ng-repeat="name in packages" ng-value="name" ng-bind="name"></option>
        </select>
      </div>

      <button type="button" class="btn btn-primary" ng-click="save()"
              ng-disabled="busy || (!selectedOwner && !selectedPackage)">
        <i class="fas fa-floppy-disk me-1"></i>Save
      </button>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>window.CP_SITE_DOMAIN = "{{ domain|escapejs }}";</script>
<script src="{% static 'websiteFunctions/siteTools.js' %}"></script>
{% endblock %}