<% @page_title = "Set up a Webhook" %>

<% content_for :header do %>
  <div class="header__actions header__actions--start">
    <%= link_to collection_webhooks_path, class: "btn borderless txt-medium", data: { controller: "hotkey", action: "keydown.esc@document->hotkey#click" } do %>
      <span class="overflow-ellipsis">
        &larr;
        <strong>Webhooks</strong>
      </span>
    <% end %>
  </div>

  <h1 class="header__title"><%= @page_title %></h1>
<% end %>

<article class="panel center txt-align-start" style="view-transition-name: <%= dom_id(@webhook) %>">
  <%= form_with model: @webhook, url: collection_webhooks_path, data: { controller: "form" }, html: { class: "flex flex-column gap" } do |form| %>
    <h2 class="txt-large margin-none">
      <%= form.text_field :name, required: true, autofocus: true, class: "input", placeholder: "Name this Webhook…", data: { action: "keydown.esc@document->form#cancel" } %>
    </h2>

    <div class="flex flex-column gap-half">
      <%= form.label :url do %>
        <strong>Payload URL</strong><br>
        <p class="margin-none txt-x-small txt-subtle">This is the URL for the app that will receive payloads from BOXCAR.</p>
      <% end %>
      <%= form.url_field :url,
            required: true,
            pattern: "https?://.*",
            title: "Must be an http:// or https:// URL",
            class: "input",
            placeholder: "https://example.com",
            data: { action: "keydown.esc@document->form#cancel" } %>
    </div>

    <div class="flex flex-column gap-half">
      <%= form.label :actions do %>
        <strong>Events</strong><br>
        <p class="margin-none txt-x-small txt-subtle">Trigger a call to the Payload URL when these things occur:</p>
      <% end %>
      <%= render "webhooks/form/actions", form: form %>
    </div>

    <%= form.button type: :submit, class: "btn btn--link center txt-medium" do %>
      <span>Create Webhook</span>
    <% end %>

    <%= link_to "Go back", collection_webhooks_path, data: { form_target: "cancel" }, hidden: true %>
  <% end %>
</article>
