<div class="alert alert-warning" role="alert">
  <p>
    Only admins with explicit <strong>single resource admin</strong> role may make changes to site config. Even super admins require this permission.
  <p>
  <h2>
    <% if current_user.has_role?(:single_resource_admin, Config) %>
      <div class="alert alert-primary">You have permission to make config changes. Do so with care.</div>
    <% else %>
      You do not have permission to make config changes. (Read Only)
    <% end %>
  </h2>
</div>

<div class="row my-3" 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">Site Configuration</h2>
      <button class="btn btn-secondary float-right" type="button">
        Toggle Site Configuration
      </button>
    </div>
    <div id="siteConfigBodyContainer" class="collapse show hide p-3" aria-labelledby="siteConfigHeader">
      <%= form_for(SiteConfig.new, url: internal_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">
            <div class="form-group">
              <%= f.label :community_description, "Community description" %>
              <%= f.text_field :community_description,
                               class: "form-control",
                               value: SiteConfig.community_description,
                               placeholder: "A fabulous community of kind and welcoming people." %>
              <div class="alert alert-info">Used in meta description tags etc.</div>
            </div>

            <div class="form-group">
              <%= f.label :community_member_description, "Community member description" %>
              <%= f.text_field :community_member_description,
                               class: "form-control",
                               value: SiteConfig.community_member_description,
                               placeholder: "amazing humans who code." %>
              <div class="alert alert-info">Used in pre-login banners.</div>
            </div>

            <div class="form-group">
              <%= f.label :tagline, "Tagline" %>
              <%= f.text_field :tagline,
                               class: "form-control",
                               value: SiteConfig.tagline,
                               placeholder: "We're a place where coders share, stay up-to-date and grow their careers." %>
              <div class="alert alert-info">Used in signup modal.</div>
            </div>

            <div class="form-group">
              <%= f.label :mascot_user_id, "Mascot user ID" %>
              <%= f.text_field :mascot_user_id,
                               class: "form-control",
                               value: SiteConfig.mascot_user_id,
                               min: 1,
                               placeholder: "1" %>
              <div class="alert alert-info">User ID of the Mascot account</div>
            </div>
          </div>
        </div>

        <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">
            <div class="form-group">
              <%= f.fields_for :social_media_handles do |social_media_field| %>
                <% SiteConfig.social_media_handles.each do |platform, username| %>
                  <div>
                    <%= social_media_field.label platform %>
                    <%= social_media_field.text_field platform,
                                                      class: "form-control",
                                                      value: SiteConfig.social_media_handles[platform],
                                                      placeholder: "" %>
                    <div class="alert alert-info"><%= platform.capitalize %> Username</div>
                  </div>
                <% end %>
              <% end %>
            </div>
          </div>
        </div>

        <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">
           <div class="form-group">
             <%= f.fields_for :email_addresses do |email_field| %>
               <% SiteConfig.email_addresses.each do |type, address| %>
                 <div>
                   <%= email_field.label type %>
                   <%= email_field.text_field type,
                                              class: "form-control",
                                              value: SiteConfig.email_addresses[type],
                                              placeholder: "" %>
                   <div class="alert alert-info"><%= type.capitalize %> Email</div>
                 </div>
               <% end %>
             <% end %>
           </div>
          </div>
        </div>

        <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">
            <div class="form-group">
              <%= f.label :authentication_providers, "Authentication providers" %>
              <%= f.text_field :authentication_providers,
                               class: "form-control",
                               value: SiteConfig.authentication_providers.join(","),
                               placeholder: "List of valid providers: comma separated, letters only e.g. twitter,github" %>
              <div class="alert alert-info">How can users sign in? (More options coming)</div>
            </div>
          </div>
        </div>

        <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">
            <div class="form-group">
              <%= f.label :campaign_hero_html_variant_name %>
              <%= f.text_field :campaign_hero_html_variant_name,
                               class: "form-control",
                               value: SiteConfig.campaign_hero_html_variant_name,
                               placeholder: "" %>
              <div class="alert alert-info">Hero HtmlVariant name</div>
            </div>

            <div class="form-group">
              <%= f.label :campaign_sidebar_enabled %>
              <%= f.check_box :campaign_sidebar_enabled, checked: SiteConfig.campaign_sidebar_enabled %>
              <div class="alert alert-info">Campaign sidebar enabled or not</div>
            </div>

            <div class="form-group">
              <%= f.label :campaign_sidebar_image %>
              <% if SiteConfig.campaign_sidebar_image %>
                <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: "form-control",
                               value: SiteConfig.campaign_sidebar_image,
                               placeholder: "https://image.url" %>
              <div class="alert alert-info">Used at the top of the campaign sidebar</div>
            </div>

            <div class="form-group">
              <%= f.label :campaign_featured_tags %>
              <%= f.text_field :campaign_featured_tags,
                               class: "form-control",
                               value: SiteConfig.campaign_featured_tags.join(","),
                               placeholder: "List of campaign tags: comma separated, letters only e.g. shecoded,theycoded" %>
              <div class="alert alert-info">Posts with which tags will be featured in the campaign sidebar (comma separated, letters only)</div>
            </div>
          </div>
        </div>

        <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">
            <div class="form-group">
              <%= f.label :main_social_image %>
              <%= f.text_field :main_social_image,
                               class: "form-control",
                               value: SiteConfig.main_social_image,
                               placeholder: "https://image.url" %>
              <div class="row mt-2">
                <div class="col-12">
                  <img alt="main social image" class="img-fluid" src="<%= SiteConfig.main_social_image %>" />
                </div>
                <div class="col-12">
                  <div class="alert alert-info">
                    <h5>Used as the main image in social networks and OpenGraph</h5>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <%= f.label :favicon_url %>
                <%= f.text_field :favicon_url,
                                 class: "form-control",
                                 value: SiteConfig.favicon_url,
                                 placeholder: "https://image.url" %>
                <div class="alert alert-info">Used as the site favicon</div>
                <img alt="favicon" class="preview" src="<%= SiteConfig.favicon_url %>" />
              </div>
              <div class="form-group">
                <%= f.label :logo_png %>
                <%= f.text_field :logo_png,
                                 class: "form-control",
                                 value: SiteConfig.logo_png,
                                 placeholder: "https://image.url/image.png" %>
                <div class="alert alert-info">Minimum 1024px, used for PWA etc.</div>
                <img alt="favicon" class="preview" src="<%= SiteConfig.logo_png %>" />
              </div>
              <div class="form-group">
                <%= f.label :logo_svg %>
                <%= f.text_area :logo_svg,
                                class: "form-control",
                                value: SiteConfig.logo_svg,
                                rows: 6,
                                placeholder: "<svg ...></svg>" %>
                <div class="alert alert-info">Used as the SVG logo of the community</div>
                <%= @logo_svg %>
              </div>

              <%= f.label :primary_sticker_image_url %>
              <%= f.text_field :primary_sticker_image_url,
                               class: "form-control",
                               value: SiteConfig.primary_sticker_image_url,
                               placeholder: "https://image.url" %>
              <div class="row mt-2">
                <div class="col-12">
                  <img alt="main social image" class="img-fluid" src="<%= SiteConfig.primary_sticker_image_url %>" />
                </div>
                <div class="col-12">
                  <div class="alert alert-info"> Used as the primary sticker image </div>
                </div>
              </div>

              <%= f.label :onboarding_taskcard_image %>
              <%= f.text_field :onboarding_taskcard_image,
                               class: "form-control",
                               value: SiteConfig.onboarding_taskcard_image,
                               placeholder: "https://image.url" %>
              <div class="row mt-2">
                <div class="col-12">
                  <img alt="main social image" class="img-fluid" src="<%= SiteConfig.onboarding_taskcard_image %>" />
                </div>
                <div class="col-12">
                  <div class="alert alert-info"> Used as the onboarding task-card image </div>
                </div>
              </div>

              <%= f.label :mascot_image_url %>
              <%= f.text_field :mascot_image_url,
                               class: "form-control",
                               value: SiteConfig.mascot_image_url,
                               placeholder: "https://image.url" %>
              <div class="row mt-2">
                <div class="col-12">
                  <img alt="<%= SiteConfig.mascot_image_description %>" class="img-fluid" src="<%= SiteConfig.mascot_image_url %>" />
                </div>
                <div class="col-12">
                  <div class="alert alert-info"> Used as the mascot image. </div>
                </div>
              </div>

              <%= f.label :mascot_image_description %>
              <%= f.text_field :mascot_image_description,
                               class: "form-control",
                               value: SiteConfig.mascot_image_description %>
              <div class="alert alert-info">Used as the alt text for the mascot image </div>
            </div>
          </div>
        </div>

        <div class="card mt-3">
          <%= render partial: "card_header",
                     locals: {
                       header: "Rate limits",
                       state: "collapse",
                       target: "rateLimitsBodyContainer",
                       expanded: "false"
                     } %>
          <div id="rateLimitsBodyContainer" class="card-body collapse hide" aria-labelledby="rateLimitsBodyContainer">
            <div class="form-group">
              <%= f.label :rate_limit_follow_count_daily %>
              <%= f.number_field :rate_limit_follow_count_daily,
                                 class: "form-control",
                                 value: SiteConfig.rate_limit_follow_count_daily,
                                 min: 0,
                                 placeholder: 500 %>
              <div class="alert alert-info">Used to limit the amount of users a person can follow daily</div>
            </div>

            <div class="form-group">
              <%= f.label :rate_limit_comment_creation %>
              <%= f.number_field :rate_limit_comment_creation,
                                 class: "form-control",
                                 value: SiteConfig.rate_limit_comment_creation,
                                 min: 0,
                                 placeholder: 9 %>
              <div class="alert alert-info">Used to limit the amount of comments a user can create within 30 seconds</div>
            </div>

            <div class="form-group">
              <%= f.label :rate_limit_published_article_creation %>
              <%= f.number_field :rate_limit_published_article_creation,
                                 class: "form-control",
                                 value: SiteConfig.rate_limit_published_article_creation,
                                 min: 0,
                                 placeholder: 9 %>
              <div class="alert alert-info">Used to limit the amount of articles a user can create within 30 seconds</div>
            </div>

            <div class="form-group">
              <%= f.label :rate_limit_image_upload %>
              <%= f.number_field :rate_limit_image_upload,
                                 class: "form-control",
                                 value: SiteConfig.rate_limit_image_upload,
                                 min: 0,
                                 placeholder: 9 %>
              <div class="alert alert-info">Used to limit the amount of images a user can upload within 30 seconds</div>
            </div>

            <div class="form-group">
              <%= f.label :rate_limit_email_recipient %>
              <%= f.number_field :rate_limit_email_recipient,
                                 class: "form-control",
                                 value: SiteConfig.rate_limit_email_recipient,
                                 min: 0,
                                 placeholder: 5 %>
              <div class="alert alert-info">Used to limit the amount of emails we send to a user within 2 minutes</div>
            </div>
          </div>
        </div>

        <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">
            <div class="form-group">
              <%= f.label :ga_view_id, "View ID" %>
              <%= f.text_field :ga_view_id,
                               class: "form-control",
                               value: SiteConfig.ga_view_id %>
              <div class="alert alert-info">Google Analytics Reporting API v4 - View ID</div>
            </div>

            <div class="form-group">
              <%= f.label :ga_fetch_rate, "Fetch rate" %>
              <%= f.number_field :ga_fetch_rate,
                                 class: "form-control",
                                 value: SiteConfig.ga_fetch_rate,
                                 min: 1,
                                 placeholder: 1 %>
              <div class="alert alert-info">Determines how often the site updates its Google Analytics stats</div>
            </div>
          </div>
        </div>

        <div class="card mt-3">
          <%= render partial: "card_header",
                     locals: {
                       header: "Mailchimp Lists IDs",
                       state: "collapse",
                       target: "mailchimpListBodyContainer",
                       expanded: "false"
                     } %>
          <div id="mailchimpListBodyContainer" class="card-body collapse hide" aria-labelledby="mailchimpListBodyContainer">
            <div class="form-group">
              <%= f.label :mailchimp_newsletter_id, "Main Newsletter" %>
              <%= f.text_field :mailchimp_newsletter_id,
                               class: "form-control",
                               value: SiteConfig.mailchimp_newsletter_id %>
              <div class="alert alert-info">Main Newsletter ID</div>
            </div>

            <div class="form-group">
              <%= f.label :mailchimp_sustaining_members_id, "Sustaining Members Newsletter" %>
              <%= f.text_field :mailchimp_sustaining_members_id,
                               class: "form-control",
                               value: SiteConfig.mailchimp_sustaining_members_id %>
              <div class="alert alert-info">Sustaining Members Newsletter ID</div>
            </div>

            <div class="form-group">
              <%= f.label :mailchimp_tag_moderators_id, "Tag Moderators Newsletter" %>
              <%= f.text_field :mailchimp_tag_moderators_id,
                               class: "form-control",
                               value: SiteConfig.mailchimp_tag_moderators_id %>
              <div class="alert alert-info">Tag Moderators Newsletter ID</div>
            </div>

            <div class="form-group">
              <%= f.label :mailchimp_community_moderators_id, "Community Moderators Newsletter" %>
              <%= f.text_field :mailchimp_community_moderators_id,
                               class: "form-control",
                               value: SiteConfig.mailchimp_community_moderators_id %>
              <div class="alert alert-info">Community Moderators Newsletter ID</div>
            </div>
          </div>
        </div>

        <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">
            <div class="form-group">
              <%= f.label :periodic_email_digest_max %>
              <%= f.number_field :periodic_email_digest_max,
                                 class: "form-control",
                                 value: SiteConfig.periodic_email_digest_max,
                                 placeholder: 0 %>
              <div class="alert alert-info">Determines the maximum for the periodic email digest</div>
            </div>

            <div class="form-group">
              <%= f.label :periodic_email_digest_min %>
              <%= f.number_field :periodic_email_digest_min,
                                 class: "form-control",
                                 value: SiteConfig.periodic_email_digest_min,
                                 placeholder: 2 %>
              <div class="alert alert-info">Determines the mininum for the periodic email digest</div>
            </div>
          </div>
        </div>

        <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">
            <div class="form-group">
              <%= f.label :suggested_tags %>
              <%= f.text_field :suggested_tags,
                               class: "form-control",
                               value: SiteConfig.suggested_tags.join(","),
                               placeholder: "List of valid tags: comma separated, letters only e.g. beginners,javascript,ruby,swift,kotlin" %>
              <div class="alert alert-info">Determines which tags are suggested to new users during onboarding (comma
                separated, letters only)</div>
            </div>
            <div class="form-group">
              <%= f.label :sidebar_tags %>
              <%= f.text_field :sidebar_tags,
                               class: "form-control",
                               value: SiteConfig.sidebar_tags.join(","),
                               placeholder: "List of valid tags: comma separated, letters only e.g. help,discuss,explainlikeimfive,meta" %>
              <div class="alert alert-info">Determines which tags are shown on the homepage righthand sidebar</div>
            </div>
          </div>
        </div>

        <div class="card mt-3">
          <%= render partial: "card_header",
                     locals: {
                       header: "Shop",
                       state: "collapse",
                       target: "shopBodyContainer",
                       expanded: "false"
                     } %>
          <div id="shopBodyContainer" class="card-body collapse hide" aria-labelledby="shopBodyContainer">
            <div class="form-group">
              <%= f.label :shop_url %>
              <%= f.text_field :shop_url,
                               class: "form-control",
                               value: SiteConfig.shop_url,
                               placeholder: "Shop url" %>
              <div class="alert alert-info">Used as the shop url of the community</div>
            </div>
          </div>
        </div>

        <% if current_user.has_role?(:single_resource_admin, Config) %>
          <div class="card mt-3">
            <div class="card-header">Confirm and Submit</div>
            <div class="card-body">
              <div class="form-group">
                <%= label_tag :confirmation %>
                <%= text_field_tag :confirmation, nil, class: "form-control", placeholder: "Confirmation text", autocomplete: "off" %>
                <div class="alert alert-info">Type: My username is @your_username and this action is 100% safe and appropriate.</div>
                <%= f.submit "Update Site Configuration", class: "btn btn-danger btn-lg" %>
              </div>
            </div>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</div>

<% if current_user.has_role?(:single_resource_admin, Config) && current_user.has_role?(:super_admin) %>
  <div class="row my-3" id="siteConfig">
    <div class="card w-100">
      <div class="card-header" id="appConfigHeader" data-toggle="collapse"
        data-target="#appConfigBodyContainer" aria-expanded="false" aria-controls="appConfigBodyContainer">
        <h2 class="d-inline">Environment variables / AppConfig (readonly)</h2>
        <button class="btn btn-secondary float-right" type="button">
          Toggle Environment Variables
        </button>
      </div>
      <div id="appConfigBodyContainer" class="collapse hide" aria-labelledby="appConfigHeader">
        <table class="table">
          <thead>
            <tr>
              <th>Variable</th>
              <th>Value</th>
            </tr>
          </thead>
          <tbody>
            <% ENVied.config.variables.each do |v| %>
            <% if v.group.in?(ENVied.required_groups) %>
            <tr>
              <td><%= v.name %></td>
              <td style="max-width: 750px;"><%= ApplicationConfig[v.name] %></td>
            </tr>
            <% end %>
            <% end %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
<% end %>
