{{if id}}<form action=“#/client/${id}” method=“put” class=“client edit”> {{else}}<form action=“#/clients” method=“post” class=“client new”>{{/if}}

<div class="fields">
  <h2>Identification</h2>
  <img id="image">
  <label>Display Name
    <input type="text" name="displayName" value="${displayName}" size="70" required autofocus>
    <p class="hint">This is the application name that users see when asked to authorize.</p>
  </label>
  <label>Site URL
    <input type="url" name="link" value="${link}" size="70" required>
    <p class="hint">This is a link to the application's site.</p>
  </label>
  <label>Image URL
    <input type="url" name="imageUrl" value="${imageUrl}" size="70">
    <p class="hint">This is a link to the application's icon (48x48).</p>
  </label>
  <label>Redirect URI
    <input type="url" name="redirectUri" value="${redirectUri}" size="70" required>
    <p class="hint">Users redirected back to this URL on successful authorization.</p>
  </label>
  <label>Notes
    <textarea name="notes" cols="50" rows="5">${notes}</textarea>
    <p class="hint">For internal use.</p>
  </label>
  {{if id}}<button>Save Changes</button>
  {{else}}<button>Create Client</button>{{/if}}
</div>
<div class="scope">
  <h2>Scope</h2>
  {{each common}}
    <label class="check"><input type="checkbox" name="scope" value="${this}" ${scope.indexOf(this.toString()) < 0 ? null : "checked"}>${this}</label>
  {{/each}}
  {{each scope}}
    {{if common.indexOf(this.toString()) < 0}}
    <label class="check uncommon"><input type="checkbox" name="scope" value="${this}" checked>${this}</label>
    {{/if}}
  {{/each}}
  <label>Uncommon
    <input type="text" name="scope" value="" size="35">
    <p class="hint">Space separated list of uncommon scope.</p>
  </label>
</div>
<hr>

</form> <script type=“text/javascript”>

$(function() {
  var image = $("#image");
  image.load(function() {
    image.show().removeClass("loading");
  }).error(function() {
    if (image.attr("src"))
      image.removeClass("loading");
  });

  var imageUrl = $("input[name=imageUrl]");
  imageUrl.change(function() {
    var url = $(this).val().trim();
    if (url == "") {
      image.hide();
    } else {
      image.attr("src", "admin/images/loading.gif").show().addClass("loading");
      setTimeout(function() { image.attr("src", url); }, 10);
    }
  }).trigger("change");

  $("input[name=link]").change(function() {
    if (imageUrl.val().trim() == "") {
      $("#image").show().addClass("loading").attr("src", null);
      var image = new Image();
      image.src = $(this).val().trim().replace(/^(https?:\/\/)(.+?)(\/.*|$)/, "$1$2/favicon.ico");
      image.onload = function() {
        if (imageUrl.val().trim() == "") {
          imageUrl.val(image.src).trigger("change");
        } 
      }
    }
  });
})

</script>