<div class="page-header">
  <h1><%= t ".title" %></h1>
  <%= link_to t(".back_to_apps"), developer_apps_path %>
</div>

<%= form_with model: @app, url: developer_apps_path, method: :post, local: true do |f| %>
  <% if @app.errors.any? %>
    <%= render Components::Banner.new(kind: :danger) do %>
      <h4 style="color: var(--error-fg);"><%= t ".errors_header", count: @app.errors.count %></h4>
      <ul>
        <% @app.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    <% end %>
  <% end %>

  <div class="field-group">
    <%= f.label :name, t(".app_name") %>
    <%= f.text_field :name, placeholder: t(".app_name_placeholder"), required: true %>
  </div>

  <div class="field-group">
    <%= f.label :redirect_uri, t(".redirect_uri") %>
    <%= f.text_area :redirect_uri, placeholder: t(".redirect_uri_placeholder"), rows: 3, required: true %>
    <small class="usn"><%= t ".redirect_uri_hint" %></small>
  </div>

  <div class="field-group">
    <%= f.label :scopes_array, t(".scopes") %>
    <input type="hidden" name="program[scopes_array][]" value="">
    <% Program::COMMUNITY_ALLOWED_SCOPES.each do |scope| %>
      <label class="checkbox-label">
        <%= check_box_tag "program[scopes_array][]", scope, false, id: "program_scopes_#{scope}" %>
        <span><%= scope %></span>
        <small style="color: var(--text-secondary);">
          <%= Program::AVAILABLE_SCOPES.find { |s| s[:name] == scope }&.dig(:description) %>
        </small>
      </label>
    <% end %>
    <small class="usn"><%= t ".scopes_hint", scopes: Program::COMMUNITY_ALLOWED_SCOPES.join(", ") %></small>
  </div>
  <br>
  <br>
  <%= render Components::Banner.new(kind: :info) do %>
    <%= t(".trust_level_note_html").html_safe %>
  <% end %>

  <div style="display: flex; gap: 0.75rem;">
    <%= f.submit t(".create"), class: "button" %>
    <%= link_to t(".cancel"), developer_apps_path, class: "button-secondary" %>
  </div>
<% end %>
