<h3>Discourse</h3>
<ul role="list">
  <%= render FormElements::FieldsetToggleComponent.new(
    form: f,
    attribute: :discourse_enabled,
    enabled: Setting.discourse_enabled?,
    title: "Enable Discourse integration",
    description: "Discourse configuration present and features enabled"
  ) %>
<% if Setting.discourse_enabled? %>
  <%= render FormElements::FieldsetResettableSettingComponent.new(
        key: :discourse_public_url,
        title: "Public URL"
      ) %>
  <%= render FormElements::FieldsetResettableSettingComponent.new(
        key: :discourse_connect_secret,
        type: :password,
        title: "Connect secret"
      ) %>
<% end %>
</ul>
<% if Setting.discourse_enabled? %>
  <% content_for :documentation do %>
    <h3 class="mt-8">How to configure Discourse</h3>
    <ol class="list-decimal list-inside">
    <li class="mb-6">
      Set the <strong>Discourse Connect URL</strong> to the following URL:
    </li>
    <li data-controller="clipboard" class="mb-6 flex gap-1">
      <input type="text" class="grow" disabled="disabled"
             value="https://<%= Setting.accounts_domain %>/discourse/connect"
             data-clipboard-target="source" />
      <button class="btn-md btn-icon btn-outline shrink-0"
              data-clipboard-target="trigger" data-action="clipboard#copy"
              title="Copy to clipboard">
        <span class="content-initial">
          <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
        </span>
        <span class="content-active hidden">
          <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
        </span>
      </button>
    </li>
    <li class="mb-6">
      Set the <strong>Discourse Connect Secret</strong> to the value above.
    </li>
    <li>
      Enable Discourse Connect.
    </li>
  <% end %>
<% end %>
