<div class="space-y-4">
  <div>
    <h2 class="font-medium mb-1"><%= t(".title") %></h2>
    <% if ENV["EODHD_API_KEY"].present? %>
      <p class="text-sm text-secondary"><%= t(".env_configured_message") %></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"> <%= t(".show_details") %></summary>
          <ol class="text-sm text-secondary mt-2 list-decimal ml-6 space-y-2">
            <li><%= t(".step_1_html") %></li>
            <li><%= t(".step_2_html") %></li>
            <li><%= t(".step_3") %></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| %>
    <% has_key = ENV["EODHD_API_KEY"].present? || Setting.eodhd_api_key.present? %>
    <%= form.text_field :eodhd_api_key,
                        label: t(".label"),
                        type: "password",
                        placeholder: t(".placeholder"),
                        value: has_key ? "********" : "",
                        disabled: ENV["EODHD_API_KEY"].present?,
                        data: { "auto-submit-form-target": "auto" } %>
  <% end %>

  <%= render DS::Alert.new(message: t(".rate_limit_warning"), variant: :warning) %>
</div>
