{% extends 'developer/client_details/base.html' %}

{% set client_details_page = "basic_info" %}

{% block client_details_content %}
  {% if is_new %}
    <div class="alert alert-warning alert-dismissible fade show mb-4" role="alert">
      <h4 class="alert-heading">Well done!</h4>
      <p>
        Please head to our
        <a href="http://docs.simplelogin.io" target="_blank">
        documentation <i class="fe fe-external-link"></i></a>
        to see how to add SimpleLogin into your website/application.
      </p>
      <p>
        <strong>And if you already know about OAuth</strong>, do not forget to set your OAuth <em>Redirect URI</em>
        before your app is deployed on production. You can add the <em>Redirect URI</em>
        in the <b>OAuth Settings</b> section on the right 👉

        SimpleLogin OAuth endpoints can be found in <b>OAuth endpoints</b> section, always on the right 👉
      </p>

      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true"></span>
      </button>
    </div>
  {% endif %}

  <form method="post" enctype="multipart/form-data">
    {{ form.csrf_token }}

    <h3>App Info</h3>
    <div class="form-group">
      <label class="form-label">Display Name</label>
      {{ form.name(class="form-control", value=client.name) }}
      {{ render_field_errors(form.name) }}
    </div>

    <div class="form-group">
      <label class="form-label">Website URL</label>
      {{ form.home_url(class="form-control", type="url", value=client.home_url or "",
              placeholder="https://mywebsite.com") }}
      {{ render_field_errors(form.home_url) }}
    </div>

    <div class="form-group">
      <div class="form-label">App Icon</div>
      <p>
        <small class="text-muted">The icon displayed on the authorization page</small>
      </p>
      {{ form.icon(class="form-control-file") }}
      {{ render_field_errors(form.icon) }}

      {% if client.icon_id %}
        <img src="{{ client.icon.get_url() }}" class="client-icon">
      {% endif %}
    </div>
    <button type="submit" class="btn btn-primary btn-lg">Update</button>
  </form>
{% endblock %}