<%= content_for :page_title, "Sync Providers" %>

<div class="space-y-4">
  <% if @encryption_error %>
    <div class="p-4 rounded-lg bg-destructive/10 border border-destructive/20">
      <div class="flex items-start gap-3">
        <%= icon("triangle-alert", class: "w-5 h-5 text-destructive shrink-0 mt-0.5") %>
        <div>
          <h3 class="font-medium text-primary"><%= t("settings.providers.encryption_error.title") %></h3>
          <p class="text-secondary text-sm mt-1"><%= t("settings.providers.encryption_error.message") %></p>
        </div>
      </div>
    </div>
  <% else %>
    <div>
      <p class="text-secondary mb-4">
        Configure credentials for third-party sync providers. Settings configured here will override environment variables.
      </p>
    </div>
  <% end %>

  <% unless @encryption_error %>
    <% @provider_configurations.each do |config| %>
      <%= settings_section title: config.provider_key.titleize, collapsible: true, open: false do %>
        <%= render "settings/providers/provider_form", configuration: config %>
      <% end %>
    <% end %>

    <%# Providers below are hardcoded because they manage Family-scoped connections                 %>
    <%# (via their own models like SimplefinItem, LunchflowItem, etc.) rather than global settings. %>
    <%# They require custom UI for connection management, status display, and sync actions.         %>
    <%# The controller excludes them from @provider_configurations (see prepare_show_context).      %>

    <%= settings_section title: "Lunch Flow", collapsible: true, open: false do %>
      <turbo-frame id="lunchflow-providers-panel">
        <%= render "settings/providers/lunchflow_panel" %>
      </turbo-frame>
    <% end %>

    <%= settings_section title: "SimpleFIN", collapsible: true, open: false do %>
      <turbo-frame id="simplefin-providers-panel">
        <%= render "settings/providers/simplefin_panel" %>
      </turbo-frame>
    <% end %>

    <%= settings_section title: "Enable Banking (beta)", collapsible: true, open: false do %>
      <turbo-frame id="enable_banking-providers-panel">
        <%= render "settings/providers/enable_banking_panel" %>
      </turbo-frame>
    <% end %>

    <%= settings_section title: "CoinStats (beta)", collapsible: true, open: false do %>
      <turbo-frame id="coinstats-providers-panel">
        <%= render "settings/providers/coinstats_panel" %>
      </turbo-frame>
    <% end %>

    <%= settings_section title: "Mercury (beta)", collapsible: true, open: false do %>
      <turbo-frame id="mercury-providers-panel">
        <%= render "settings/providers/mercury_panel" %>
      </turbo-frame>
    <% end %>

    <%= settings_section title: "Coinbase (beta)", collapsible: true, open: false do %>
      <turbo-frame id="coinbase-providers-panel">
        <%= render "settings/providers/coinbase_panel" %>
      </turbo-frame>
    <% end %>

    <%= settings_section title: "Binance (beta)", collapsible: true, open: false do %>
      <turbo-frame id="binance-providers-panel">
        <%= render "settings/providers/binance_panel" %>
      </turbo-frame>
    <% end %>

    <%= settings_section title: "SnapTrade (beta)", collapsible: true, open: false, auto_open_param: "manage" do %>
      <turbo-frame id="snaptrade-providers-panel">
        <%= render "settings/providers/snaptrade_panel" %>
      </turbo-frame>
    <% end %>

    <%= settings_section title: "Indexa Capital (alpha)", collapsible: true, open: false do %>
      <turbo-frame id="indexa_capital-providers-panel">
        <%= render "settings/providers/indexa_capital_panel" %>
      </turbo-frame>
    <% end %>
  <% end %>
</div>
