{% extends 'default.html' %}
{% set active_page = "custom_domain" %}

{% block title %}
  Custom Domains
{% endblock %}

{% block head %}
{% endblock %}

{% block default_content %}
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <h1 class="h3"> Custom Domains </h1>

      {% if not current_user.is_premium() %}
        <div class="alert alert-danger" role="alert">
          This feature is only available in premium plan.
        </div>
      {% endif %}

      <div class="alert alert-primary" role="alert">
        If you own a domain, let's say <b>example.com</b>, you will be able to create aliases with this domain, for example
        contact@example.com, help@example.com, etc with SimpleLogin. <br>
        You could also enable <b>catch-all</b> feature that allows you to create aliases on-the-fly.
      </div>

      {% for custom_domain in custom_domains %}
        <div class="card" style="max-width: 50rem">
          <div class="card-body">
            <h5 class="card-title">
              <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">{{ custom_domain.domain }}</a>
              {% if custom_domain.verified %}
                <span class="cursor" data-toggle="tooltip" data-original-title="Domain Verified">✅</span>
              {% else %}
                <span class="cursor" data-toggle="tooltip" data-original-title="DNS Setup Needed">
                  <a href="{{ url_for('dashboard.domain_detail_dns', custom_domain_id=custom_domain.id) }}"
                     class="text-decoration-none">🚫
                  </a>
                </span>
              {% endif %}
            </h5>
            <h6 class="card-subtitle mb-2 text-muted">
              Created {{ custom_domain.created_at | dt }} <br>
              <span class="font-weight-bold">{{ custom_domain.nb_alias() }}</span> aliases.
            </h6>

            <a href="{{ url_for('dashboard.domain_detail', custom_domain_id=custom_domain.id) }}">Details ➡</a>
          </div>
        </div>
      {% endfor %}

      <hr>

      <form method="post">
        {{ new_custom_domain_form.csrf_token }}
        <input type="hidden" name="form-name" value="create">

        <label class="form-label">Domain</label>
        <small>Please use full path domain, for ex <em>my-subdomain.my-domain.com</em></small>

        {{ new_custom_domain_form.domain(class="form-control", placeholder="my-domain.com") }}
        {{ render_field_errors(new_custom_domain_form.domain) }}
        <button class="btn btn-lg btn-success mt-2">Create</button>
      </form>


    </div>

  </div>
{% endblock %}

{% block script %}
  <script>
    $(".delete-custom-domain").on("click", function (e) {
      notie.confirm({
        text: "All aliases associated with this domain will be also deleted, " +
          " please confirm.",
        cancelCallback: () => {
          // nothing to do
        },
        submitCallback: () => {
          $(this).closest("form").submit();
        }
      });
    });
  </script>
{% endblock %}