docbrown/app/views/admin/configs/show.html.erb

<div class="grid gap-6" data-controller="config">
  <div class="crayons-notice crayons-notice--info" role="alert">
    <p class="mb-1">
      Only admins with explicit <strong>single resource admin</strong> role may make changes to site config. Even super admins require this permission.
    </p>
      <% if current_user.has_role?(:single_resource_admin, Config) %>
        <p class="fw-bold">You have permission to make config changes. Do so with care.</p>
      <% else %>
        <p>You do not have permission to make config changes. (Read Only)</p>
      <% end %>
    </h2>
  </div>

  <div id="getStarted">
    <div class="card w-100">
      <div class="card-header" id="getStartedHeader" data-toggle="collapse"
        data-target="#getStartedBodyContainer" aria-expanded="true" aria-controls="getStartedBodyContainer">
        <h2 class="d-inline">Get Started</h2>
        <button class="btn btn-secondary float-right" type="button">
          Toggle Get Started
        </button>
      </div>

      <div id="getStartedBodyContainer" class="<%= VerifySetupCompleted.setup_completed? ? "hide collapse" : "show expand" %> p-3" aria-labelledby="siteConfigHeader">
        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <fieldset class="flex flex-column gap-4">

          <% VerifySetupCompleted::MANDATORY_CONFIGS.each do |config_key| %>
            <%# we need to list the config as separate fields if the data structure is a Hash %>
            <% if SiteConfig.public_send(config_key).is_a?(Hash) %>
              <%= admin_config_label config_key.to_s %>
              <div class="form-group">
                <%= f.fields_for config_key do |a_field| %>
                  <% SiteConfig.public_send(config_key).each do |key, value| %>
                    <div class="crayons-field">
                      <%= admin_config_label key.to_s %>
                      <%= admin_config_description "#{key} #{config_key.to_s.tr! '_', ' '}" %>
                      <%= a_field.text_field key,
                                             class: "crayons-textfield",
                                             value: SiteConfig.public_send(config_key)[key],
                                             placeholder: Constants::SiteConfig::DETAILS[config_key][:placeholder] %>
                    </div>
                  <% end %>
                <% end %>
              </div>
            <% elsif SiteConfig.public_send(config_key).is_a?(Array) %>
              <div class="crayons-field">
                <%= admin_config_label config_key %>
                <%= admin_config_description Constants::SiteConfig::DETAILS[config_key][:description] %>
                <%= f.text_field config_key,
                                 class: "crayons-textfield",
                                 value: SiteConfig.public_send(config_key).join(","),
                                 placeholder: Constants::SiteConfig::DETAILS[config_key][:placeholder] %>
              </div>
            <% else %>
              <div class="crayons-field">
                <%= admin_config_label config_key %>
                <%= admin_config_description Constants::SiteConfig::DETAILS[config_key][:description] %>
                <%= f.text_field config_key,
                                 class: "form-control",
                                 value: SiteConfig.public_send(config_key),
                                 placeholder: Constants::SiteConfig::DETAILS[config_key][:placeholder] %>
              </div>
            <% end %>
          <% end %>

          <% if current_user.has_role?(:single_resource_admin, Config) %>
            <div class="crayons-notice p-4 mt-4">
              <div class="crayons-field">
                <%= label_tag :confirmation_update, "Confirmation update", class: "crayons-field__label" %>
                <p class="crayons-field__description">Type the sentence: <strong><%= @confirmation_text %></strong></p>
                <div class="flex">
                  <%= text_field_tag :confirmation, nil, class: "crayons-textfield flex-1 mr-2", placeholder: "Confirmation text", autocomplete: "off", required: true, pattern: @confirmation_text %>
                  <%= f.submit "Update Site Configuration", class: "crayons-btn align-self-start" %>
                </div>
              </div>
            </div>
          <% end %>
          </fieldset>
        <% end %>
      </div>
    </div>
  </div>

  <div id="siteConfig">
    <div class="card w-100">
      <div class="card-header" id="siteConfigHeader" data-toggle="collapse"
        data-target="#siteConfigBodyContainer" aria-expanded="true" aria-controls="siteConfigBodyContainer">
        <h2 class="d-inline">All Site Configuration</h2>
        <button class="btn btn-secondary float-right" type="button">
          Toggle Site Configuration
        </button>
      </div>
      <div id="siteConfigBodyContainer" class="p-3" aria-labelledby="siteConfigHeader">
        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "API Tokens",
                         state: "collapse",
                         target: "apiBodyContainer",
                         expanded: "false"
                       } %>
            <div id="apiBodyContainer" class="card-body collapse hide" aria-labelledby="apiBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :health_check_token %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:health_check_token][:description] %>
                  <%= f.text_field :health_check_token,
                                   class: "crayons-textfield",
                                   value: SiteConfig.health_check_token,
                                   placeholder: Constants::SiteConfig::DETAILS[:health_check_token][:placeholder] %>
                </div>
                <div class="crayons-field">
                  <%= admin_config_label :video_encoder_key %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:video_encoder_key][:description] %>
                  <%= f.text_field :video_encoder_key,
                                   class: "crayons-textfield",
                                   value: SiteConfig.video_encoder_key,
                                   placeholder: Constants::SiteConfig::DETAILS[:video_encoder_key][:placeholder] %>
                </div>
                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Authentication",
                         state: "collapse",
                         target: "authenticationBodyContainer",
                         expanded: "false"
                       } %>
            <div id="authenticationBodyContainer" class="card-body collapse hide" aria-labelledby="authenticationBodyContainer">
              <section class="mb-6">
                <h3 class="crayons-subtitle-3 mb-3">
                  General
                </h3>
                <div class="form-group">
                  <div class="crayons-field--checkbox">
                    <%= f.check_box :invite_only_mode, checked: SiteConfig.invite_only_mode, data: { action: "config#disableTargetField", disable_target: "authenticationProviders" }, class: "crayons-checkbox" %>
                    <div class="mt-0">
                      <%= admin_config_label :invite_only_mode %>
                      <%= admin_config_description Constants::SiteConfig::DETAILS[:invite_only_mode][:description] %>
                    </div>
                  </div>
                </div>
              </section>
              <section>
                <h3 class="crayons-subtitle-3 mb-3">
                  Authentication methods
                </h3>
                <div class="form-group">
                  <%= admin_config_label :authentication_providers %>
                  <p class="crayons-field__description">
                    <%= Constants::SiteConfig::DETAILS[:authentication_providers][:description] %>
                  </p>
                  <%= select_tag "site_config[authentication_providers]",
                                 options_from_collection_for_select(
                                   authentication_available_providers,
                                   :provider_name,
                                   :official_name,
                                   authentication_enabled_providers.map(&:provider_name),
                                 ),
                                 multiple: true,
                                 class: "form-control selectpicker",
                                 data: { target: "config.authenticationProviders" } %>
                </div>

                <section class="config-authentication__item">
                  <figure class="config-authentication__item--icon">
                    <%= inline_svg_tag("email.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
                  </figure>
                  <div class="config-authentication__item--container">
                    <div class="config-authentication__item--label">
                      <p class="fw-medium">
                        Email address and password
                      </p>
                    </div>
                    <div class="config-authentication__item--body">
                      <fieldset class="config-authentication-form">
                        <div class="crayons-field--checkbox">
                          <%= f.check_box :allow_email_password_registration, checked: SiteConfig.allow_email_password_registration, class: "crayons-checkbox" %>
                          <div>
                            <%= admin_config_label :allow_email_password_registration %>
                            <p class="crayons-field__description">
                              <%= Constants::SiteConfig::DETAILS[:allow_email_password_registration][:description] %>
                            </p>
                          </div>
                        </div>
                        <div class="crayons-field--checkbox">
                          <%= f.check_box :allow_email_password_login, checked: SiteConfig.allow_email_password_login, class: "crayons-checkbox" %>
                          <div>
                            <%= admin_config_label :allow_email_password_login %>
                            <p class="crayons-field__description">
                              <%= Constants::SiteConfig::DETAILS[:allow_email_password_login][:description] %>
                            </p>
                          </div>
                        </div>
                        <div class="crayons-field--checkbox">
                          <%= f.check_box :require_captcha_for_email_password_registration,
                                          checked: SiteConfig.require_captcha_for_email_password_registration,
                                          data: { action: "config#toggleGoogleRecaptchaFields", target: "config.requireCaptchaForEmailPasswordRegistration" },
                                          class: "crayons-checkbox" %>
                          <div>
                            <%= admin_config_label :require_captcha_for_email_password_registration, "Enable Google reCAPTCHA for email password registration" %>
                            <p class="crayons-field__description">
                              <%= Constants::SiteConfig::DETAILS[:require_captcha_for_email_password_registration][:description] %>
                            </p>
                          </div>
                        </div>
                        <div id="recaptchaContainer" class="<%= SiteConfig.require_captcha_for_email_password_registration ? "" : "collapse" %> ml-7" aria-labelledby="recaptchaContainer">
                          <div class="form-group">
                            <%= admin_config_label :recaptcha_site_key, "Google reCAPTCHA site key" %>
                            <p class="crayons-field__description mb-1">
                              <%= Constants::SiteConfig::DETAILS[:recaptcha_site_key][:description] %>
                            </p>
                            <%= f.text_field :recaptcha_site_key,
                                             class: "form-control",
                                             value: SiteConfig.recaptcha_site_key,
                                             placeholder: Constants::SiteConfig::DETAILS[:recaptcha_site_key][:placeholder] %>
                          </div>
                          <div class="form-group">
                            <%= admin_config_label :recaptcha_secret_key, "Google reCAPTCHA secret key" %>
                            <p class="crayons-field__description mb-1">
                              <%= Constants::SiteConfig::DETAILS[:recaptcha_secret_key][:description] %>
                            </p>
                            <%= f.text_field :recaptcha_secret_key,
                                             class: "form-control",
                                             value: SiteConfig.recaptcha_secret_key,
                                             placeholder: Constants::SiteConfig::DETAILS[:recaptcha_secret_key][:placeholder] %>
                          </div>
                        </div>
                      </fieldset>
                    </div>
                  </div>
                </section>

                <section class="config-authentication__item">
                  <figure class="config-authentication__item--icon">
                    <%= inline_svg_tag("twitter.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
                  </figure>
                  <div class="config-authentication__item--container">
                    <div class="config-authentication__item--label">
                      <p class="fw-medium">
                        Twitter
                      </p>
                    </div>
                    <div class="config-authentication__item--body">
                      <fieldset class="config-authentication-form">
                        <div class="crayons-field">
                          <%= admin_config_label :twitter_key %>
                          <p class="crayons-field__description">
                            <%= Constants::SiteConfig::DETAILS[:twitter_key][:description] %>
                          </p>
                          <%= f.text_field :twitter_key,
                                           class: "crayons-textfield",
                                           value: SiteConfig.twitter_key,
                                           placeholder: Constants::SiteConfig::DETAILS[:twitter_key][:placeholder] %>
                        </div>

                        <div class="crayons-field">
                          <%= admin_config_label :twitter_secret %>
                          <p class="crayons-field__description">
                            <%= Constants::SiteConfig::DETAILS[:twitter_secret][:description] %>
                          <p>
                          <%= f.text_field :twitter_secret,
                                           class: "crayons-textfield",
                                           value: SiteConfig.twitter_secret,
                                           placeholder: Constants::SiteConfig::DETAILS[:twitter_secret][:placeholder] %>
                        </div>
                      </fieldset>
                    </div>
                  </div>
                </section>

                <section class="config-authentication__item">
                  <figure class="config-authentication__item--icon">
                    <%= inline_svg_tag("github.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
                  </figure>
                  <div class="config-authentication__item--container">
                    <div class="config-authentication__item--label">
                      <p class="fw-medium">
                        Github
                      </p>
                    </div>
                    <div class="config-authentication__item--body">
                      <fieldset class="config-authentication-form">
                        <div class="crayons-field">
                          <%= admin_config_label :github_key %>
                          <p class="crayons-field__description">
                            <%= Constants::SiteConfig::DETAILS[:github_key][:description] %>
                          </p>
                          <%= f.text_field :github_key,
                                           class: "crayons-textfield",
                                           value: SiteConfig.github_key,
                                           placeholder: Constants::SiteConfig::DETAILS[:github_key][:placeholder] %>

                        </div>
                        <div class="crayons-field">
                          <%= admin_config_label :github_secret %>
                          <p class="config-authentication__row--subtitle">
                            <%= Constants::SiteConfig::DETAILS[:github_secret][:description] %>
                          </p>
                          <%= f.text_field :github_secret,
                                           class: "crayons-textfield",
                                           value: SiteConfig.github_secret,
                                           placeholder: Constants::SiteConfig::DETAILS[:github_secret][:placeholder] %>
                        </div>
                      </fieldset>
                    </div>
                  </div>
                </section>

                <section class="config-authentication__item">
                  <figure class="config-authentication__item--icon">
                    <%= inline_svg_tag("facebook.svg", class: "crayons-icon", aria: true, title: "Twitter logo") %>
                  </figure>
                  <div class="config-authentication__item--container">
                    <div class="config-authentication__item--label">
                      <p class="fw-medium">
                        Facebook
                      </p>
                    </div>
                    <div class="config-authentication__item--body">
                      <fieldset class="config-authentication-form">
                        <div class="crayons-field">
                          <%= admin_config_label :facebook_key %>
                          <p class="crayons-field__description">
                            <%= Constants::SiteConfig::DETAILS[:facebook_key][:description] %>
                          </p>
                          <%= f.text_field :facebook_key,
                                           class: "crayons-textfield",
                                           value: SiteConfig.facebook_key,
                                           placeholder: Constants::SiteConfig::DETAILS[:facebook_key][:placeholder] %>
                        </div>

                        <div class="crayons-field">
                          <%= admin_config_label :facebook_secret %>
                            <p class="crayons-field__description">
                            <%= Constants::SiteConfig::DETAILS[:facebook_secret][:description] %>
                            </p>
                          <%= f.text_field :facebook_secret,
                                           class: "crayons-textfield",
                                           value: SiteConfig.facebook_secret,
                                           placeholder: Constants::SiteConfig::DETAILS[:facebook_secret][:placeholder] %>
                        </div>
                      </fieldset>
                    </div>
                  </div>
                </section>
              </section>
              <div class="crayons-notice crayons-notice--info mb-4">
                Changing authentication keys will not take affect until this forem instance is restarted.
              </div>

              <%= render "form_submission", f: f %>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Campaign",
                         state: "collapse",
                         target: "campaignBodyContainer",
                         expanded: "false"
                       } %>
            <div id="campaignBodyContainer" class="card-body collapse hide" aria-labelledby="campaignBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :campaign_hero_html_variant_name, "Campaign hero HTML variant name" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:campaign_hero_html_variant_name][:description] %>
                  <%= f.text_field :campaign_hero_html_variant_name,
                                   class: "crayons-textfield",
                                   value: SiteConfig.campaign_hero_html_variant_name,
                                   placeholder: Constants::SiteConfig::DETAILS[:campaign_hero_html_variant_name][:placeholder] %>
                </div>

                <div class="crayons-field crayons-field--checkbox">
                  <%= f.check_box :campaign_articles_require_approval, checked: SiteConfig.campaign_articles_require_approval, class: "crayons-checkbox" %>
                  <%= admin_config_label :campaign_articles_require_approval %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:campaign_articles_require_approval][:description] %>
                </div>

                <div class="crayons-field crayons-field--checkbox">
                  <%= f.check_box :campaign_sidebar_enabled, checked: SiteConfig.campaign_sidebar_enabled, class: "crayons-checkbox" %>
                  <%= admin_config_label :campaign_sidebar_enabled %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:campaign_sidebar_enabled][:description] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :campaign_sidebar_image %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:campaign_sidebar_image][:description] %>
                  <% if SiteConfig.campaign_sidebar_image.present? %>
                    <div class="row mt-2">
                      <div class="col-12">
                        <img alt="Campaign sidebar image" class="img-fluid" src="<%= SiteConfig.campaign_sidebar_image %>" />
                      </div>
                    </div>
                  <% end %>
                  <%= f.text_field :campaign_sidebar_image,
                                   class: "crayons-textfield",
                                   value: SiteConfig.campaign_sidebar_image,
                                   placeholder: Constants::SiteConfig::DETAILS[:campaign_sidebar_image][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :campaign_url, "Campaign URL" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:campaign_url][:description] %>
                  <%= f.text_field :campaign_url,
                                   class: "crayons-textfield",
                                   value: SiteConfig.campaign_url,
                                   placeholder: Constants::SiteConfig::DETAILS[:campaign_url][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :campaign_featured_tags %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:campaign_featured_tags][:description] %>
                  <%= f.text_field :campaign_featured_tags,
                                   class: "crayons-textfield",
                                   value: SiteConfig.campaign_featured_tags.join(","),
                                   placeholder: Constants::SiteConfig::DETAILS[:campaign_featured_tags][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :campaign_call_to_action, "Campaign Call to Action" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:campaign_call_to_action][:description] %>
                  <%= f.text_field :campaign_call_to_action,
                                   class: "crayons-textfield",
                                   value: SiteConfig.campaign_call_to_action,
                                   placeholder: Constants::SiteConfig::DETAILS[:campaign_call_to_action][:placeholder] %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Community Content",
                         state: "collapse",
                         target: "contentBodyContainer",
                         expanded: "false"
                       } %>
            <div id="contentBodyContainer" class="card-body collapse hide" aria-labelledby="contentBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :community_name %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:community_name][:description] %>
                  <%= f.text_field :community_name,
                                   class: "crayons-textfield",
                                   value: SiteConfig.community_name,
                                   placeholder: Constants::SiteConfig::DETAILS[:community_name][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :collective_noun %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:collective_noun][:description] %>
                  <%= f.text_field :collective_noun,
                                   class: "crayons-textfield",
                                   value: SiteConfig.collective_noun,
                                   placeholder: Constants::SiteConfig::DETAILS[:collective_noun][:placeholder],
                                   disabled: SiteConfig.collective_noun_disabled,
                                   data: { target: "config.collectiveNoun" } %>
                  <%= admin_config_label :collective_noun_disabled %>
                  <%= f.check_box :collective_noun_disabled, checked: SiteConfig.collective_noun_disabled, data: { action: "config#disableTargetField", disable_target: "collectiveNoun" }, class: "crayons-checkbox" %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :tagline %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:tagline][:description] %>
                  <%= f.text_field :tagline,
                                   class: "crayons-textfield",
                                   value: SiteConfig.tagline,
                                   placeholder: Constants::SiteConfig::DETAILS[:tagline][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :community_description %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:community_description][:description] %>
                  <%= f.text_field :community_description,
                                   class: "crayons-textfield",
                                   value: SiteConfig.community_description,
                                   placeholder: Constants::SiteConfig::DETAILS[:community_description][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :community_member_label %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:community_member_label][:description] %>
                  <%= f.text_field :community_member_label,
                                   class: "crayons-textfield",
                                   value: SiteConfig.community_member_label,
                                   placeholder: Constants::SiteConfig::DETAILS[:community_member_label][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :community_copyright_start_year %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:community_copyright_start_year][:description] %>
                  <%= f.text_field :community_copyright_start_year,
                                   class: "crayons-textfield",
                                   value: SiteConfig.community_copyright_start_year,
                                   placeholder: Constants::SiteConfig::DETAILS[:community_copyright_start_year][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :staff_user_id %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:staff_user_id][:description] %>
                  <%= f.text_field :staff_user_id,
                                   class: "crayons-textfield",
                                   value: SiteConfig.staff_user_id,
                                   placeholder: Constants::SiteConfig::DETAILS[:staff_user_id][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :experience_low %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:experience_low][:description] %>
                  <%= f.text_field :experience_low,
                                   class: "crayons-texfield",
                                   value: SiteConfig.experience_low,
                                   placeholder: Constants::SiteConfig::DETAILS[:experience_low][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :experience_high %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:experience_high][:description] %>
                  <%= f.text_field :experience_high,
                                   class: "crayons-texfield",
                                   value: SiteConfig.experience_high,
                                   placeholder: Constants::SiteConfig::DETAILS[:experience_high][:placeholder] %>
                </div>
                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Credits",
                         state: "collapse",
                         target: "creditsBodyContainer",
                         expanded: "false"
                       } %>

            <div id="creditsBodyContainer" class="card-body collapse hide" aria-labelledby="creditsBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <%= f.fields_for :credit_prices_in_cents do |price_field| %>
                  <div class="crayons-field">
                    <%= admin_config_label "Credit price in cents (S)" %>
                    <%= admin_config_description Constants::SiteConfig::DETAILS[:credit_prices_in_cents][:small][:description] %>
                    <%= price_field.number_field :small,
                                                 class: "crayons-textfield",
                                                 value: SiteConfig.credit_prices_in_cents[:small] %>
                  </div>

                  <div class="crayons-field">
                    <%= admin_config_label "Credit price in cents (M)" %>
                    <%= admin_config_description Constants::SiteConfig::DETAILS[:credit_prices_in_cents][:medium][:description] %>
                    <%= price_field.number_field :medium,
                                                 class: "crayons-textfield",
                                                 value: SiteConfig.credit_prices_in_cents[:medium] %>
                  </div>
                  <div class="crayons-field">
                    <%= admin_config_label "Credit price in cents (L)" %>
                    <%= admin_config_description Constants::SiteConfig::DETAILS[:credit_prices_in_cents][:large][:description] %>
                    <%= price_field.number_field :large,
                                                 class: "crayons-textfield",
                                                 value: SiteConfig.credit_prices_in_cents[:large] %>
                  </div>

                  <div class="crayons-field">
                    <%= admin_config_label "Credit price in cents (XL)" %>
                    <%= admin_config_description Constants::SiteConfig::DETAILS[:credit_prices_in_cents][:xlarge][:description] %>
                    <%= price_field.number_field :xlarge,
                                                 class: "crayons-textfield",
                                                 value: SiteConfig.credit_prices_in_cents[:xlarge] %>
                  </div>
                <% end %>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Emails",
                         state: "collapse",
                         target: "emailBodyContainer",
                         expanded: "false"
                       } %>
            <div id="emailBodyContainer" class="card-body collapse hide" aria-labelledby="emailBodyContainer">
              <fieldset class="flex flex-column gap-4">
                  <div class="crayons-field">
                    <label for="site_config_email_addresses_default" class="crayons-field__label">
                      Default
                    </label>
                    <div class="crayons-field__description">
                      Default (set via <span class="ff-monospace">default_email</span> environment variable)
                    </div>
                    <input type="text" value="<%= ApplicationConfig["DEFAULT_EMAIL"] %>" class="form-control" readonly>
                  </div>
                  <%= f.fields_for :email_addresses do |email_field| %>
                    <% SiteConfig.email_addresses.except(:default).each do |type, address| %>
                      <div class="crayons-field">
                        <%= admin_config_label type %>
                        <%= admin_config_description Constants::SiteConfig::DETAILS[:email_addresses][:description] %>
                        <%= email_field.text_field type,
                                                   class: "crayons-textfield",
                                                   value: SiteConfig.email_addresses[type],
                                                   placeholder: Constants::SiteConfig::DETAILS[:email_addresses][:placeholder] %>
                      </div>
                    <% end %>
                  <% end %>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Email digest frequency",
                         state: "collapse",
                         target: "emailDigestBodyContainer",
                         expanded: "false"
                       } %>
            <div id="emailDigestBodyContainer" class="card-body collapse hide" aria-labelledby="emailDigestBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :periodic_email_digest_max %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:periodic_email_digest_max][:description] %>
                  <%= f.number_field :periodic_email_digest_max,
                                     class: "crayons-textfield",
                                     value: SiteConfig.periodic_email_digest_max,
                                     placeholder: Constants::SiteConfig::DETAILS[:periodic_email_digest_max][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :periodic_email_digest_min %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:periodic_email_digest_max][:description] %>
                  <%= f.number_field :periodic_email_digest_min,
                                     class: "crayons-textfield",
                                     value: SiteConfig.periodic_email_digest_min,
                                     placeholder: Constants::SiteConfig::DETAILS[:periodic_email_digest_max][:placeholder] %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Jobs",
                         state: "collapse",
                         target: "jobsBodyContainer",
                         expanded: "false"
                       } %>
            <div id="jobsBodyContainer" class="card-body collapse hide" aria-labelledby="jobsBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :jobs_url, "Jobs URL" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:jobs_url][:description] %>
                  <%= f.text_field :jobs_url,
                                   class: "crayons-textfield",
                                   value: SiteConfig.jobs_url,
                                   placeholder: Constants::SiteConfig::DETAILS[:jobs_url][:placeholder] %>
                </div>
                <div class="crayons-field crayons-field--checkbox">
                  <%= f.check_box :display_jobs_banner, checked: SiteConfig.display_jobs_banner, class: "crayons-checkbox" %>
                  <div class="mt-0">
                    <%= admin_config_label :display_jobs_banner %>
                    <%= admin_config_description Constants::SiteConfig::DETAILS[:display_jobs_banner][:description] %>
                  </div>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Google Analytics Reporting API v4",
                         state: "collapse",
                         target: "gaBodyContainer",
                         expanded: "false"
                       } %>
            <div id="gaBodyContainer" class="card-body collapse hide" aria-labelledby="gaBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :ga_tracking_id, "View ID" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:ga_tracking_id][:description] %>
                  <%= f.text_field :ga_tracking_id,
                                   class: "crayons-textfield",
                                   value: SiteConfig.ga_tracking_id %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Images",
                         state: "collapse",
                         target: "imagesBodyContainer",
                         expanded: "false"
                       } %>
            <div id="imagesBodyContainer" class="card-body collapse hide" aria-labelledby="imagesBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :main_social_image %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:main_social_image][:description] %>
                  <%= f.text_field :main_social_image,
                                   class: "crayons-textfield",
                                   value: SiteConfig.main_social_image,
                                   placeholder: Constants::SiteConfig::DETAILS[:main_social_image][:placeholder] %>
                  <% if SiteConfig.main_social_image.present? %>
                    <img alt="main social image" class="img-fluid" src="<%= SiteConfig.main_social_image %>" />
                  <% end %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :favicon_url, "Favicon URL" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:favicon_url][:description] %>
                  <%= f.text_field :favicon_url,
                                   class: "form-control",
                                   value: SiteConfig.favicon_url,
                                   placeholder: Constants::SiteConfig::DETAILS[:favicon_url][:placeholder] %>
                  <img alt="favicon" class="preview" src="<%= SiteConfig.favicon_url %>" />
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :logo_png %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:logo_png][:description] %>
                  <%= f.text_field :logo_png,
                                   class: "crayons-textfield",
                                   value: SiteConfig.logo_png,
                                   placeholder: Constants::SiteConfig::DETAILS[:logo_png][:placeholder] %>
                  <% if SiteConfig.logo_png.present? %>
                    <img src="<%= SiteConfig.logo_png %>" width="128" height="128" />
                  <% end %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :logo_svg %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:logo_svg][:description] %>
                  <%= f.text_area :logo_svg,
                                  class: "crayons-textfield",
                                  value: SiteConfig.logo_svg,
                                  rows: 6,
                                  placeholder: Constants::SiteConfig::DETAILS[:logo_svg][:placeholder] %>
                  <% if SiteConfig.logo_svg.present? %>
                    <div class="site-logo">
                      <%= SiteConfig.logo_svg.html_safe %>
                    </div>
                  <% end %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :secondary_logo_url %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:secondary_logo_url][:description] %>
                  <%= f.text_field :secondary_logo_url,
                                   class: "crayons-textfield",
                                   value: SiteConfig.secondary_logo_url,
                                   placeholder: Constants::SiteConfig::DETAILS[:secondary_logo_url][:placeholder] %>
                  <% if SiteConfig.secondary_logo_url.present? %>
                    <img alt="secondary logo image" class="img-fluid" src="<%= SiteConfig.secondary_logo_url %>" />
                  <% end %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :left_navbar_svg_icon %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:left_navbar_svg_icon][:description] %>
                  <%= f.text_area :left_navbar_svg_icon,
                                  class: "crayons-textfield",
                                  value: SiteConfig.left_navbar_svg_icon,
                                  rows: 6,
                                  placeholder: Constants::SiteConfig::DETAILS[:left_navbar_svg_icon][:placeholder] %>
                  <%= SiteConfig.left_navbar_svg_icon.html_safe %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :right_navbar_svg_icon %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:right_navbar_svg_icon][:description] %>
                  <%= f.text_area :right_navbar_svg_icon,
                                  class: "crayons-textfield",
                                  value: SiteConfig.right_navbar_svg_icon,
                                  rows: 6,
                                  placeholder: Constants::SiteConfig::DETAILS[:right_navbar_svg_icon][:placeholder] %>
                  <%= SiteConfig.right_navbar_svg_icon.html_safe %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Mascot",
                         state: "collapse",
                         target: "mascotBodyContainer",
                         expanded: "false"
                       } %>
            <div id="mascotBodyContainer" class="card-body collapse hide" aria-labelledby="mascotBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :mascot_user_id, "Mascot user ID" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mascot_user_id][:description] %>
                  <%= f.text_field :mascot_user_id,
                                   class: "crayons-textfield",
                                   value: SiteConfig.mascot_user_id,
                                   min: 1,
                                   placeholder: Constants::SiteConfig::DETAILS[:mascot_user_id][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mascot_image_url, "Mascot Image URL" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mascot_image_url][:description] %>
                  <%= f.text_field :mascot_image_url,
                                   class: "crayons-textfield",
                                   value: SiteConfig.mascot_image_url,
                                   placeholder: Constants::SiteConfig::DETAILS[:mascot_image_url][:placeholder] %>

                  <div class="col-12">
                    <img alt="<%= SiteConfig.mascot_image_description %>" class="img-fluid" src="<%= SiteConfig.mascot_image_url %>" />
                  </div>

                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mascot_footer_image_url %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mascot_footer_image_url][:description] %>
                  <%= f.text_field :mascot_footer_image_url,
                                   class: "crayons-textfield",
                                   value: SiteConfig.mascot_footer_image_url,
                                   placeholder: Constants::SiteConfig::DETAILS[:mascot_footer_image_url][:placeholder] %>

                  <div class="col-12">
                    <img alt="<%= SiteConfig.mascot_image_description %>" class="img-fluid" src="<%= SiteConfig.mascot_footer_image_url %>" />
                  </div>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mascot_footer_image_width %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mascot_footer_image_width][:description] %>
                  <%= f.text_field :mascot_footer_image_width,
                                   class: "form-control",
                                   value: SiteConfig.mascot_footer_image_width %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mascot_footer_image_height %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mascot_footer_image_height][:description] %>
                  <%= f.text_field :mascot_footer_image_height,
                                   class: "form-control",
                                   value: SiteConfig.mascot_footer_image_height %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mascot_image_description %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mascot_image_description][:description] %>
                  <%= f.text_field :mascot_image_description,
                                   class: "form-control",
                                   value: SiteConfig.mascot_image_description %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Meta Keywords",
                         state: "collapse",
                         target: "metaKeywordsBodyContainer",
                         expanded: "false"
                       } %>
            <div id="metaKeywordsBodyContainer" class="card-body collapse hide" aria-labelledby="metaKeywordsBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <%= f.fields_for :meta_keywords do |meta_keywords_field| %>
                  <% SiteConfig.meta_keywords.each do |area, keywords| %>
                    <div class="crayons-field">
                      <%= admin_config_label area.to_s %>
                      <p class="crayons-field__description">
                        <%= area.capitalize %><%= "page" unless area == "default" %> keywords
                      </p>
                      <%= meta_keywords_field.text_field area,
                                                         class: "crayons-textfield",
                                                         value: SiteConfig.meta_keywords[area],
                                                         placeholder: Constants::SiteConfig::DETAILS[:meta_keywords][:placeholder] %>
                    </div>
                  <% end %>
                <% end %>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Monetization",
                         state: "collapse",
                         target: "monetizationBodyContainer",
                         expanded: "false"
                       } %>
            <div id="monetizationBodyContainer" class="card-body collapse hide" aria-labelledby="monetizationBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :shop_url, "Shop URL" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:shop_url][:description] %>
                  <%= f.text_field :shop_url,
                                   class: "crayons-textfield",
                                   value: SiteConfig.shop_url,
                                   placeholder: Constants::SiteConfig::DETAILS[:shop_url][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :stripe_api_key, "Stripe API key" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:stripe_api_key][:description] %>
                  <%= f.text_field :stripe_api_key,
                                   class: "crayons-textfield",
                                   value: SiteConfig.stripe_api_key,
                                   placeholder: Constants::SiteConfig::DETAILS[:stripe_api_key][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :stripe_publishable_key %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:stripe_publishable_key][:description] %>
                  <%= f.text_field :stripe_publishable_key,
                                   class: "crayons-textfield",
                                   value: SiteConfig.stripe_publishable_key,
                                   placeholder: Constants::SiteConfig::DETAILS[:stripe_publishable_key][:placeholder] %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :payment_pointer %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:payment_pointer][:description] %>
                  <%= f.text_field :payment_pointer,
                                   class: "crayons-textfield",
                                   value: SiteConfig.payment_pointer,
                                   placeholder: Constants::SiteConfig::DETAILS[:payment_pointer][:placeholder] %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Newsletter",
                         state: "collapse",
                         target: "newsletterBodyContainer",
                         expanded: "false"
                       } %>
            <div id="newsletterBodyContainer" class="card-body collapse hide" aria-labelledby="newsletterBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :mailchimp_api_key, "Mailchimp API Key" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mailchimp_api_key][:description] %>
                  <%= f.text_field :mailchimp_api_key,
                                   class: "crayons-textfield",
                                   value: SiteConfig.mailchimp_api_key %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mailchimp_newsletter_id, "Main Newsletter" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mailchimp_newsletter_id][:description] %>
                  <%= f.text_field :mailchimp_newsletter_id,
                                   class: "crayons-textfield",
                                   value: SiteConfig.mailchimp_newsletter_id %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mailchimp_sustaining_members_id, "Sustaining Members Newsletter" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mailchimp_sustaining_members_id][:description] %>
                  <%= f.text_field :mailchimp_sustaining_members_id,
                                   class: "crayons-textfield",
                                   value: SiteConfig.mailchimp_sustaining_members_id %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mailchimp_tag_moderators_id, "Tag Moderators Newsletter" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mailchimp_tag_moderators_id][:description] %>
                  <%= f.text_field :mailchimp_tag_moderators_id,
                                   class: "crayons-textfield",
                                   value: SiteConfig.mailchimp_tag_moderators_id %>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :mailchimp_community_moderators_id, "Community Moderators Newsletter" %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:mailchimp_community_moderators_id][:description] %>
                  <%= f.text_field :mailchimp_community_moderators_id,
                                   class: "crayons-textfield",
                                   value: SiteConfig.mailchimp_community_moderators_id %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Onboarding",
                         state: "collapse",
                         target: "onboardingBodyContainer",
                         expanded: "false"
                       } %>
            <div id="onboardingBodyContainer" class="card-body collapse hide" aria-labelledby="onboardingBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :onboarding_logo_image %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:onboarding_logo_image][:description] %>
                  <%= f.text_field :onboarding_logo_image,
                                   class: "crayons-textfield",
                                   value: SiteConfig.onboarding_logo_image,
                                   placeholder: Constants::SiteConfig::DETAILS[:onboarding_logo_image][:placeholder] %>
                  <div class="row mt-2">
                    <div class="col-12">
                      <img alt="main social image" class="img-fluid" src="<%= SiteConfig.onboarding_logo_image %>" />
                    </div>
                  </div>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :onboarding_background_image %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:onboarding_background_image][:description] %>
                  <%= f.text_field :onboarding_background_image,
                                   class: "crayons-textfield",
                                   value: SiteConfig.onboarding_background_image,
                                   placeholder: Constants::SiteConfig::DETAILS[:onboarding_background_image][:placeholder] %>
                  <div class="row mt-2">
                    <div class="col-12">
                      <img alt="onboarding background image" class="img-fluid" src="<%= SiteConfig.onboarding_background_image %>" />
                    </div>
                  </div>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :onboarding_taskcard_image %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:onboarding_taskcard_image][:description] %>
                  <%= f.text_field :onboarding_taskcard_image,
                                   class: "crayons-textfield",
                                   value: SiteConfig.onboarding_taskcard_image,
                                   placeholder: Constants::SiteConfig::DETAILS[:onboarding_taskcard_image][:placeholder] %>
                  <div class="row mt-2">
                    <div class="col-12">
                      <img alt="onboarding taskcard image" class="img-fluid" src="<%= SiteConfig.onboarding_taskcard_image %>" />
                    </div>
                  </div>
                </div>

                <div class="crayons-field">
                  <%= admin_config_label :suggested_users %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:suggested_users][:description] %>
                  <%= f.text_field :suggested_users,
                                   class: "crayons-textfield",
                                   value: SiteConfig.suggested_users.join(","),
                                   placeholder: Constants::SiteConfig::DETAILS[:suggested_users][:placeholder] %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Rate limits and anti-spam",
                         state: "collapse",
                         target: "rateLimitsBodyContainer",
                         expanded: "false"
                       } %>
            <div id="rateLimitsBodyContainer" class="card-body collapse hide" aria-labelledby="rateLimitsBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <% configurable_rate_limits.each do |key, field_hash| %>
                  <div class="crayons-field">
                    <%= admin_config_label field_hash[:title] %>
                    <p class="crayons-field__description">
                      <%= field_hash[:description] %>
                    </p>
                    <%= f.number_field key,
                                       class: "crayons-textfield",
                                       value: SiteConfig.public_send(key),
                                       min: field_hash[:min],
                                       placeholder: field_hash[:placeholder] %>
                  </div>
                <% end %>

                <div class="crayons-field">
                  <%= admin_config_label :spam_trigger_terms %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:spam_trigger_terms][:description] %>
                  <%= f.text_area :spam_trigger_terms,
                                  class: "crayons-textfield",
                                  value: SiteConfig.spam_trigger_terms.join(","),
                                  placeholder: Constants::SiteConfig::DETAILS[:spam_trigger_terms][:placeholder] %>
                </div>
                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Social Media",
                         state: "collapse",
                         target: "socialMediaBodyContainer",
                         expanded: "false"
                       } %>
            <div id="socialMediaBodyContainer" class="card-body collapse hide" aria-labelledby="socialMediaBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :twitter_hashtag %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:twitter_hashtag][:description] %>
                  <%= f.text_field :twitter_hashtag,
                                   class: "crayons-textfield",
                                   value: SiteConfig.twitter_hashtag.to_s,
                                   placeholder: Constants::SiteConfig::DETAILS[:twitter_hashtag][:placeholder] %>
                </div>
                <%= f.fields_for :social_media_handles do |social_media_field| %>
                  <% SiteConfig.social_media_handles.each do |platform, username| %>
                    <div class="crayons-field">
                      <%= admin_config_label platform %>
                      <p class="crayons-field__description">
                        <%= platform.capitalize %> username
                      </p>
                      <%= social_media_field.text_field platform,
                                                        class: "crayons-textfield",
                                                        value: SiteConfig.social_media_handles[platform],
                                                        placeholder: "" %>
                    </div>
                  <% end %>
                <% end %>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Sponsors",
                         state: "collapse",
                         target: "sponsorsContainer",
                         expanded: "false"
                       } %>
            <div id="sponsorsContainer" class="card-body collapse hide" aria-labelledby="sponsorsContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :sponsor_headline %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:sponsor_headline][:description] %>
                  <%= f.text_field :sponsor_headline,
                                   class: "crayons-textfield",
                                   value: SiteConfig.sponsor_headline,
                                   placeholder: Constants::SiteConfig::DETAILS[:sponsor_headline][:placeholder] %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class="card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "Tags",
                         state: "collapse",
                         target: "tagsBodyContainer",
                         expanded: "false"
                       } %>
            <div id="tagsBodyContainer" class="card-body collapse hide" aria-labelledby="tagsBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-field">
                  <%= admin_config_label :sidebar_tags %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:sidebar_tags][:description] %>
                  <%= f.text_field :sidebar_tags,
                                   class: "crayons-textfield",
                                   value: SiteConfig.sidebar_tags.join(","),
                                   placeholder: Constants::SiteConfig::DETAILS[:sidebar_tags][:placeholder],
                                   pattern: "[a-z0-9,]+" %>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>

        <%= form_for(SiteConfig.new, url: admin_config_path) do |f| %>
          <div class=" card mt-3">
            <%= render partial: "card_header",
                       locals: {
                         header: "User Experience and Brand",
                         state: "collapse",
                         target: "uxBodyContainer",
                         expanded: "false"
                       } %>
            <div id="uxBodyContainer" class="card-body collapse hide" aria-labelledby="uxBodyContainer">
              <fieldset class="flex flex-column gap-4">
                <div class="crayons-fieldx">
                  <%= admin_config_label :feed_style %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:feed_style][:description] %>
                  <%= f.text_field :feed_style,
                                   class: "crayons-textfield",
                                   value: SiteConfig.feed_style,
                                   placeholder: Constants::SiteConfig::DETAILS[:feed_style][:placeholder] %>
                </div>
                <div class="crayons-field">
                  <%= admin_config_label :feed_strategy %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:feed_strategy][:description] %>
                  <%= f.text_field :feed_strategy,
                                   class: "crayons-textfield",
                                   value: SiteConfig.feed_strategy,
                                   placeholder: Constants::SiteConfig::DETAILS[:feed_strategy][:placeholder] %>
                </div>
                <div class="crayons-field">
                  <%= admin_config_label :tag_feed_minimum_score %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:tag_feed_minimum_score][:description] %>
                  <%= f.number_field :tag_feed_minimum_score,
                                     class: "crayons-textfield",
                                     value: SiteConfig.tag_feed_minimum_score,
                                     placeholder: Constants::SiteConfig::DETAILS[:tag_feed_minimum_score][:placeholder] %>
                </div>
                <div class="crayons-field">
                  <%= admin_config_label :home_feed_minimum_score %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:home_feed_minimum_score][:description] %>
                  <%= f.number_field :home_feed_minimum_score,
                                     class: "crayons-textfield",
                                     value: SiteConfig.home_feed_minimum_score,
                                     placeholder: Constants::SiteConfig::DETAILS[:home_feed_minimum_score][:placeholder] %>
                </div>
                <div class="crayons-field">
                  <%= admin_config_label :default_font %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:default_font][:description] %>
                  <%= select_tag "site_config[default_font]",
                                 options_for_select(
                                   [%w[sans-serif sans_serif], %w[serif serif], %w[open-dyslexic open_dyslexic]],
                                   SiteConfig.default_font,
                                 ),
                                 multiple: false,
                                 class: "selectpicker" %>
                </div>
                <div class="crayons-field">
                  <%= admin_config_label :primary_brand_color_hex %>
                  <%= admin_config_description Constants::SiteConfig::DETAILS[:primary_brand_color_hex][:description] %>
                  <%= f.color_field :primary_brand_color_hex,
                                    class: "crayons-color-selector",
                                    value: SiteConfig.primary_brand_color_hex,
                                    pattern: "^#+([a-fA-F0-9]{6})$",
                                    placeholder: Constants::SiteConfig::DETAILS[:primary_brand_color_hex][:placeholder] %>
                </div>
                <div class="crayons-field crayons-field--checkbox">
                  <%= f.check_box :public, checked: SiteConfig.public, class: "crayons-checkbox" %>
                  <div class="mt-0">
                    <%= admin_config_label :public %>
                    <p class="crayons-field__description">
                      Are most of the site pages (e.g. posts, profiles) public? <strong>Be very cautious about changing thing.</strong>
                    </p>
                  </div>
                </div>

                <%= render "form_submission", f: f %>
              </fieldset>
            </div>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>