<div class="space-y-4">
  <div>
    <h2 class="font-medium mb-1"><%= t(".title") %></h2>
    <% if ENV["BRAND_FETCH_CLIENT_ID"].present? %>
      <p class="text-sm text-secondary">You have successfully configured your Brand Fetch Client ID through the BRAND_FETCH_CLIENT_ID environment variable.</p>
    <% else %>
      <div class="text-secondary text-sm mb-4">
        <span><%= t(".description") %></span>
        <details class="inline">
          <summary class="cursor-pointer font-medium text-secondary underline inline"> (show details)</summary>
          <ol class="text-sm text-secondary mt-2 list-decimal ml-6 space-y-2">
            <li>
              Visit <a href="https://brandfetch.com/developers" target="_blank" rel="noopener noreferrer" class="underline">brandfetch.com</a> and create a free Brand Fetch Developer account.
            </li>
            <li>
              Go to the <a href="https://developers.brandfetch.com/dashboard/logo-api" target="_blank" rel="noopener noreferrer" class="underline">Logo API</a> page.
            </li>
            <li>
              Tap the eye icon under the "Your Client ID" section to reveal your <strong>Client ID</strong> and paste it below.
            </li>
          </ol>
        </details>
      </div>
    <% end %>
  </div>

  <%= styled_form_with model: Setting.new,
                       url: settings_hosting_path,
                       method: :patch,
                       data: {
                         controller: "auto-submit-form",
                         "auto-submit-form-trigger-event-value": "blur"
                       } do |form| %>
    <%= form.text_field :brand_fetch_client_id,
                        label: t(".label"),
                        type: "password",
                        placeholder: t(".placeholder"),
                        value: ENV.fetch("BRAND_FETCH_CLIENT_ID", Setting.brand_fetch_client_id),
                        disabled: ENV["BRAND_FETCH_CLIENT_ID"].present?,
                        data: { "auto-submit-form-target": "auto" } %>
  <% end %>

  <div class="flex items-center justify-between mt-4">
    <div class="space-y-1">
      <p class="text-sm"><%= t(".high_res_label") %></p>
      <p class="text-secondary text-sm"><%= t(".high_res_description") %></p>
    </div>

    <%= styled_form_with model: Setting.new,
                         url: settings_hosting_path,
                         method: :patch,
                         data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "change" } do |form| %>
      <%= form.toggle :brand_fetch_high_res_logos,
                      checked: ENV["BRAND_FETCH_HIGH_RES_LOGOS"].present? ? ENV["BRAND_FETCH_HIGH_RES_LOGOS"] == "true" : Setting.brand_fetch_high_res_logos,
                      disabled: ENV["BRAND_FETCH_HIGH_RES_LOGOS"].present?,
                      data: { auto_submit_form_target: "auto" } %>
    <% end %>
  </div>
</div>
