{% extends 'default.html' %}

{% set active_page = "developer" %}

{% block title %}
  Developer
{% endblock %}

{% block default_content %}
  {% if not clients %}
    <div class="alert alert-primary" role="alert">
      <strong>If you have a website or a mobile application and want to add SimpleLogin to it, this page is for
        you!</strong>
      <p>Have a look at our extensive doc to have an idea 👉
        <a href="https://docs.simplelogin.io" target="_blank">Docs <i class="fe fe-external-link"></i>
        </a>
      </p>
      <p>Create your first SimpleLogin App here 👇</p>
    </div>
  {% endif %}

  <div class="row">
    <div class="col-4">
      <a href="{{ url_for('developer.new_client') }}" class="btn btn-success">Create new app</a>
    </div>
  </div>

  <div class="row row-cards row-deck mt-4">
    {% for client in clients %}
      <div class="col-md-6 col-xl-4">
        <div class="card">
          <div class="card-header">
            <div class="card-title d-flex align-items-center">
              {% if client.icon_id %}
                <span class="avatar" style="background-image: url({{ client.icon.get_url() }})"></span>
              {% endif %}
              <span class="">
                <a href="{{ url_for('developer.client_detail', client_id=client.id) }}">
                  {{ client.name }}
                </a>
              </span>
            </div>

            <div class="card-options">
              <a href="{{ url_for('developer.client_detail', client_id=client.id) }}"
                 class="btn btn-primary btn-sm">
                Edit
              </a>
            </div>
          </div>

          <div class="card-body">
            App ID: <em>{{ client.oauth_client_id }} </em><br>
            <span class="h1 m-0">{{ client.nb_user() }}</span> Users <br>
            Created {{ client.created_at |dt }} <br>
            {% if client.last_user_login() %}
              Last User Login: {{ client.last_user_login().get_user_name() }}
            {% endif %}
          </div>

        </div>
      </div>
    {% endfor %}
  </div>

{% endblock %}

{% block script %}
  <script>
    $(".custom-switch-input").change(function (e) {
      // Only ask for confirmation when publishing, not when un-publishing
      if (e.target.checked) {
        var message = `After this, your app/website will made available in "Discover", please confirm.`;

        notie.confirm({
          text: message,
          cancelCallback: () => {
            // reset to the original value
            var oldValue = !$(this).prop("checked");
            $(this).prop("checked", oldValue);
          },
          submitCallback: () => {
            $(this).closest("form").submit();
          }
        });
      } else {
        $(this).closest("form").submit();
      }
    })
  </script>
{% endblock %}

