<%= render 'shared/turbo_modal', title: t('test_mode') do %>
  <div>
    <label class="text-sm font-semibold" for="api_key">
      X-Auth-Token
    </label>
    <div class="flex gap-2 mb-4 mt-2">
      <input id="api_key" type="text" value="<%= current_user.access_token.token %>" class="base-input w-full" autocomplete="off" readonly>
      <%= render 'shared/clipboard_copy', icon: 'copy', text: current_user.access_token.token, class: 'base-button', icon_class: 'w-6 h-6 text-white', copy_title: t('copy'), copied_title: t('copied') %>
    </div>
  </div>
  <% if @webhook_url.new_record? %>
    <%= form_for @webhook_url, url: settings_webhooks_path, method: :post, html: { autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
      <%= f.label :url, 'Webhook URL', class: 'text-sm font-semibold' %>
      <div class="space-y-2 md:flex-nowrap mt-2">
        <%= f.url_field :url, class: 'base-input w-full', placeholder: 'https://example.com/hook' %>
        <%= f.button button_title(title: t('save'), disabled_with: t('saving')), class: 'base-button w-full' %>
      </div>
    <% end %>
  <% else %>
    <%= form_for @webhook_url, url: settings_webhook_path(@webhook_url), method: :put, html: { autocomplete: 'off' }, data: { turbo_frame: :_top } do |f| %>
      <%= f.label :url, 'Webhook URL', class: 'text-sm font-semibold' %>
      <div class="space-y-2 md:flex-nowrap mt-2">
        <%= f.url_field :url, class: 'base-input w-full', placeholder: 'https://example.com/hook', required: true %>
        <%= f.button button_title(title: t('save'), disabled_with: t('saving')), class: 'base-button w-full' %>
      </div>
    <% end %>
  <% end %>
<% end %>
