<div class="max-w-7xl mx-auto">
  <div class="mb-4 md:mb-6">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tenant Settings</h1>
    <p class="mt-1 md:mt-2 text-sm md:text-base text-gray-600">Configure default settings for all websites</p>
  </div>

  <%= form_with model: @tenant_settings, url: tenant_admin_settings_path, method: :patch, local: true, class: "space-y-6" do |f| %>
    <!-- Theme Availability Section -->
    <div class="bg-white rounded-lg shadow p-4 md:p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4">Default Theme Availability</h2>
      <p class="text-sm text-gray-600 mb-4">
        Select which themes are available to new websites by default. The "Default Theme (Bristol)" is always available.
        You can override these settings for individual websites.
      </p>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <% @all_themes.each do |theme| %>
          <div class="relative flex items-start p-4 border rounded-lg <%= theme.name == 'default' ? 'bg-blue-50 border-blue-200' : 'bg-white border-gray-200' %>">
            <div class="flex items-center h-5">
              <% if theme.name == 'default' %>
                <!-- Default theme is always checked and disabled -->
                <input type="hidden" name="tenant_settings[default_available_themes][]" value="default">
                <input type="checkbox"
                       id="theme_<%= theme.name %>"
                       checked
                       disabled
                       class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 opacity-50 cursor-not-allowed">
              <% else %>
                <input type="checkbox"
                       id="theme_<%= theme.name %>"
                       name="tenant_settings[default_available_themes][]"
                       value="<%= theme.name %>"
                       <%= 'checked' if @selected_themes.include?(theme.name) %>
                       class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 cursor-pointer">
              <% end %>
            </div>
            <div class="ml-3">
              <label for="theme_<%= theme.name %>" class="font-medium text-gray-900 <%= theme.name == 'default' ? 'cursor-not-allowed' : 'cursor-pointer' %>">
                <%= theme.friendly_name || theme.name.titleize %>
              </label>
              <% if theme.description.present? %>
                <p class="text-xs text-gray-500 mt-1"><%= truncate(theme.description, length: 80) %></p>
              <% end %>
              <% if theme.name == 'default' %>
                <span class="inline-flex items-center mt-1 px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                  Always Available
                </span>
              <% end %>
            </div>
          </div>
        <% end %>
      </div>

      <% if @all_themes.empty? %>
        <div class="text-center py-8 text-gray-500">
          <p>No enabled themes found. Check your theme configuration.</p>
        </div>
      <% end %>
    </div>

    <!-- Submit Button -->
    <div class="flex justify-end">
      <%= f.submit "Save Settings", class: "px-4 md:px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm cursor-pointer" %>
    </div>
  <% end %>
</div>
