<%- include('../partials/head',{pageTitle,bodyClass:'admin-shell'}) %><%- include('nav') %><main class="admin-main"><h1>Site settings</h1><% if(saved){ %><div class="success-box">Settings saved.</div><% } %><form method="post" enctype="multipart/form-data" class="admin-form-grid"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><label><span>Site name</span><input name="site_name" value="<%= settings.site_name %>"></label><label><span>Brand tagline</span><input name="brand_tagline" value="<%= settings.brand_tagline %>"></label><label class="full-row"><span>Announcement text</span><input name="announcement_text" value="<%= settings.announcement_text %>"></label><label><span>Header CTA text</span><input name="header_cta_text" value="<%= settings.header_cta_text %>"></label><label><span>Header CTA link</span><input name="header_cta_link" value="<%= settings.header_cta_link %>"></label>
<div class="repeater full-row" data-repeater>
  <div class="repeater-head"><h3>Languages</h3><p>Shown in the header language menu. Add one language per row.</p></div>
  <div class="repeater-list" data-repeater-list>
    <% (settings.language_options||['']).forEach(function(item){ %>
      <div class="repeater-item simple" data-repeater-item>
        <input name="language_options[]" value="<%= item %>" placeholder="e.g. English">
        <button type="button" class="repeater-remove" data-repeater-remove>Remove</button>
      </div>
    <% }) %>
  </div>
  <button type="button" class="btn btn-secondary" data-repeater-add>Add language</button>
</div>
<div class="repeater full-row" data-repeater>
  <div class="repeater-head"><h3>Hero slides</h3><p>Each card is one homepage slide. Leave a row blank to skip it.</p></div>
  <div class="repeater-list" data-repeater-list>
    <% (settings.hero_slides||[]).forEach(function(item, idx){ %>
      <div class="repeater-item card" data-repeater-item>
        <div class="repeater-item-title">Slide <%= idx+1 %></div>
        <label><span>Eyebrow</span><input name="hero_slides_eyebrow" value="<%= item.eyebrow||'' %>" placeholder="Short label above the title"></label>
        <label><span>Title</span><input name="hero_slides_title" value="<%= item.title||'' %>" placeholder="Headline"></label>
        <label class="full-row"><span>Text</span><textarea name="hero_slides_text" rows="2" placeholder="Supporting copy"><%= item.text||'' %></textarea></label>
        <label><span>Button 1 text</span><input name="hero_slides_cta_text" value="<%= item.cta_text||'' %>"></label>
        <label><span>Button 1 link</span><input name="hero_slides_cta_link" value="<%= item.cta_link||'' %>" placeholder="/contact"></label>
        <label><span>Button 2 text</span><input name="hero_slides_secondary_text" value="<%= item.secondary_text||'' %>"></label>
        <label><span>Button 2 link</span><input name="hero_slides_secondary_link" value="<%= item.secondary_link||'' %>" placeholder="/collections/solar-pv"></label>
        <button type="button" class="repeater-remove" data-repeater-remove>Remove slide</button>
      </div>
    <% }) %>
  </div>
  <button type="button" class="btn btn-secondary" data-repeater-add>Add slide</button>
</div>
<div class="repeater full-row" data-repeater>
  <div class="repeater-head"><h3>Browse collection cards</h3><p>These cards appear in the Browse Collections row on the homepage.</p></div>
  <div class="repeater-list" data-repeater-list>
    <% (settings.browse_cards||[]).forEach(function(item, idx){ %>
      <div class="repeater-item card" data-repeater-item>
        <div class="repeater-item-title">Card <%= idx+1 %></div>
        <label><span>Title</span><input name="browse_cards_title" value="<%= item.title||'' %>" placeholder="Solar PV"></label>
        <label><span>Subtitle</span><input name="browse_cards_subtitle" value="<%= item.subtitle||'' %>" placeholder="On-grid, off-grid & hybrid"></label>
        <label class="full-row"><span>Link</span><input name="browse_cards_link" value="<%= item.link||'' %>" placeholder="/collections/solar-pv"></label>
        <label class="full-row" data-media-field><span>Card image</span><input name="browse_cards_image" value="<%= item.image||'' %>" data-media placeholder="Choose from the library"></label>
        <button type="button" class="repeater-remove" data-repeater-remove>Remove card</button>
      </div>
    <% }) %>
  </div>
  <button type="button" class="btn btn-secondary" data-repeater-add>Add collection card</button>
</div>
<div class="repeater full-row" data-repeater>
  <div class="repeater-head"><h3>Top offers</h3><p>Promotional tiles on the homepage. The first four are shown.</p></div>
  <div class="repeater-list" data-repeater-list>
    <% (settings.top_offers||[]).forEach(function(item, idx){ %>
      <div class="repeater-item card" data-repeater-item>
        <div class="repeater-item-title">Offer <%= idx+1 %></div>
        <label><span>Title</span><input name="offer_tiles_title" value="<%= item.title||'' %>"></label>
        <label class="full-row"><span>Description</span><textarea name="offer_tiles_text" rows="2"><%= item.text||'' %></textarea></label>
        <label class="full-row"><span>Link</span><input name="offer_tiles_link" value="<%= item.link||'' %>" placeholder="/collections/solar-pv"></label>
        <button type="button" class="repeater-remove" data-repeater-remove>Remove offer</button>
      </div>
    <% }) %>
  </div>
  <button type="button" class="btn btn-secondary" data-repeater-add>Add offer</button>
</div>
<div class="repeater full-row" data-repeater>
  <div class="repeater-head"><h3>Inspired scenes</h3><p>Story cards used in homepage inspiration sections.</p></div>
  <div class="repeater-list" data-repeater-list>
    <% (settings.inspired_scenes||[]).forEach(function(item, idx){ %>
      <div class="repeater-item card" data-repeater-item>
        <div class="repeater-item-title">Scene <%= idx+1 %></div>
        <label class="full-row"><span>Title</span><input name="inspired_scenes_title" value="<%= item.title||'' %>"></label>
        <label class="full-row"><span>Description</span><textarea name="inspired_scenes_text" rows="2"><%= item.text||'' %></textarea></label>
        <button type="button" class="repeater-remove" data-repeater-remove>Remove scene</button>
      </div>
    <% }) %>
  </div>
  <button type="button" class="btn btn-secondary" data-repeater-add>Add scene</button>
</div>
<label><span>Trending title</span><input name="trending_title" value="<%= settings.trending_title %>"></label><label><span>Browse title</span><input name="browse_title" value="<%= settings.browse_title %>"></label><label><span>Top offers title</span><input name="top_offers_title" value="<%= settings.top_offers_title %>"></label><label><span>Inspired title</span><input name="inspired_title" value="<%= settings.inspired_title %>"></label><label class="full-row"><span>About text</span><textarea name="about_text" rows="5"><%= settings.about_text %></textarea></label><label class="full-row"><span>About quote</span><textarea name="about_quote" rows="3"><%= settings.about_quote %></textarea></label><label><span>Phone</span><input name="contact_phone" value="<%= settings.contact_phone %>"></label><label><span>Email</span><input name="contact_email" value="<%= settings.contact_email %>"></label><label class="full-row"><span>Address</span><input name="contact_address" value="<%= settings.contact_address %>"></label><label><span>Instagram URL</span><input name="instagram_url" value="<%= settings.instagram_url %>"></label><label><span>Facebook URL</span><input name="facebook_url" value="<%= settings.facebook_url %>"></label><label><span>YouTube URL</span><input name="youtube_url" value="<%= settings.youtube_url %>"></label><label><span>Pinterest URL</span><input name="pinterest_url" value="<%= settings.pinterest_url %>"></label><label><span>TikTok URL</span><input name="tiktok_url" value="<%= settings.tiktok_url %>"></label><label><span>LinkedIn URL</span><input name="linkedin_url" value="<%= settings.linkedin_url %>"></label><label><span>Payment methods</span></label>
<div class="repeater full-row" data-repeater>
  <div class="repeater-head"><p>Names shown under the newsletter form, such as Visa or M-Pesa.</p></div>
  <div class="repeater-list" data-repeater-list>
    <% (settings.payment_methods||['']).forEach(function(item){ %>
      <div class="repeater-item simple" data-repeater-item>
        <input name="payment_methods[]" value="<%= item %>" placeholder="e.g. M-Pesa">
        <button type="button" class="repeater-remove" data-repeater-remove>Remove</button>
      </div>
    <% }) %>
  </div>
  <button type="button" class="btn btn-secondary" data-repeater-add>Add payment method</button>
</div>
<label><span>WhatsApp number</span><input name="whatsapp_number" value="<%= settings.whatsapp_number %>"></label><label><span>Currency code</span><input name="currency_code" value="<%= settings.currency_code %>"></label><label><span>Theme orange</span><input name="theme_orange" value="<%= settings.theme_orange %>"></label><label><span>Theme teal</span><input name="theme_teal" value="<%= settings.theme_teal %>"></label>
      <h3>Homepage — Browse / Offers / Embrace</h3>
      <label class="full-row"><span>Browse heading</span><input name="browse_heading" value="<%= settings.browse_heading %>"></label>
      <label class="full-row"><span>Browse subtitle</span><textarea name="browse_sub" rows="2"><%= settings.browse_sub %></textarea></label>
      <label class="full-row"><span>Offers heading</span><input name="offers_heading" value="<%= settings.offers_heading %>"></label>
      <label class="full-row"><span>Offers subtitle</span><textarea name="offers_sub" rows="2"><%= settings.offers_sub %></textarea></label>
      <label class="full-row"><span>Embrace heading</span><input name="embrace_heading" value="<%= settings.embrace_heading %>"></label>
      <label class="full-row"><span>Embrace text</span><textarea name="embrace_text" rows="2"><%= settings.embrace_text %></textarea></label>
      <label><span>Embrace button 1</span><input name="embrace_btn_1" value="<%= settings.embrace_btn_1 %>"></label>
      <label><span>Embrace button 1 link</span><input name="embrace_link_1" value="<%= settings.embrace_link_1 %>"></label>
      <label><span>Embrace button 2</span><input name="embrace_btn_2" value="<%= settings.embrace_btn_2 %>"></label>
      <label><span>Embrace button 2 link</span><input name="embrace_link_2" value="<%= settings.embrace_link_2 %>"></label>
      <h3 class="full-row">Homepage — Sections</h3>
      <label class="full-row"><span>Inspired heading</span><input name="inspired_heading" value="<%= settings.inspired_heading %>"></label>
      <label class="full-row"><span>Inspired text</span><textarea name="inspired_text" rows="2"><%= settings.inspired_text %></textarea></label>
      <label><span>Inspired button</span><input name="inspired_btn" value="<%= settings.inspired_btn %>"></label>
      <label><span>Inspired button link</span><input name="inspired_link" value="<%= settings.inspired_link %>"></label>
      <label class="full-row"><span>Customize heading</span><input name="customize_heading" value="<%= settings.customize_heading %>"></label>
      <label class="full-row"><span>Customize text</span><textarea name="customize_text" rows="2"><%= settings.customize_text %></textarea></label>
      <label class="full-row"><span>Customize quote</span><input name="customize_quote" value="<%= settings.customize_quote %>"></label>
      <h3 class="full-row">Homepage — Stat blocks</h3>
      <label><span>Stat 1 label</span><input name="stats_label_1" value="<%= settings.stats_label_1 %>"></label>
      <label><span>Stat 1 value</span><input name="stats_value_1" value="<%= settings.stats_value_1 %>"></label>
      <label><span>Stat 2 label</span><input name="stats_label_2" value="<%= settings.stats_label_2 %>"></label>
      <label><span>Stat 2 value</span><input name="stats_value_2" value="<%= settings.stats_value_2 %>"></label>
      <label><span>Stat 3 label</span><input name="stats_label_3" value="<%= settings.stats_label_3 %>"></label>
      <label><span>Stat 3 value</span><input name="stats_value_3" value="<%= settings.stats_value_3 %>"></label>
      <h3 class="full-row">Homepage — Season cards</h3>
      <label class="full-row"><span>Season heading</span><input name="season_heading" value="<%= settings.season_heading %>"></label>
      <label><span>Season card 1 title</span><input name="season_card_1_title" value="<%= settings.season_card_1_title %>"></label>
      <label><span>Season card 1 text</span><input name="season_card_1_text" value="<%= settings.season_card_1_text %>"></label>
      <label><span>Season card 1 CTA</span><input name="season_card_1_cta" value="<%= settings.season_card_1_cta %>"></label>
      <label class="full-row" data-media-field><span>Season card 1 image</span><input name="season_card_1_img" value="<%= settings.season_card_1_img %>" data-media></label>
      <label class="full-row"><span>Season card 2 title</span><input name="season_card_2_title" value="<%= settings.season_card_2_title %>"></label>
      <label class="full-row"><span>Season card 2 text</span><input name="season_card_2_text" value="<%= settings.season_card_2_text %>"></label>
      <label><span>Season card 2 CTA</span><input name="season_card_2_cta" value="<%= settings.season_card_2_cta %>"></label>
      <label class="full-row" data-media-field><span>Season card 2 image</span><input name="season_card_2_img" value="<%= settings.season_card_2_img %>" data-media></label>
      <label class="full-row"><span>Season card 3 title</span><input name="season_card_3_title" value="<%= settings.season_card_3_title %>"></label>
      <label class="full-row"><span>Season card 3 text</span><input name="season_card_3_text" value="<%= settings.season_card_3_text %>"></label>
      <label><span>Season card 3 CTA</span><input name="season_card_3_cta" value="<%= settings.season_card_3_cta %>"></label>
      <label class="full-row" data-media-field><span>Season card 3 image</span><input name="season_card_3_img" value="<%= settings.season_card_3_img %>" data-media></label>
      <h3 class="full-row">Homepage — Cert/Project cards</h3>
      <label><span>Card 1 title</span><input name="cert_card_1_title" value="<%= settings.cert_card_1_title %>"></label>
      <label><span>Card 1 link text</span><input name="cert_card_1_cta" value="<%= settings.cert_card_1_cta %>"></label>
      <label class="full-row" data-media-field><span>Card 1 image</span><input name="cert_card_1_img" value="<%= settings.cert_card_1_img %>" data-media></label>
      <label><span>Card 2 title</span><input name="cert_card_2_title" value="<%= settings.cert_card_2_title %>"></label>
      <label><span>Card 2 link text</span><input name="cert_card_2_cta" value="<%= settings.cert_card_2_cta %>"></label>
      <label class="full-row" data-media-field><span>Card 2 image</span><input name="cert_card_2_img" value="<%= settings.cert_card_2_img %>" data-media></label>
      <label><span>Card 3 title</span><input name="cert_card_3_title" value="<%= settings.cert_card_3_title %>"></label>
      <label><span>Card 3 link text</span><input name="cert_card_3_cta" value="<%= settings.cert_card_3_cta %>"></label>
      <label class="full-row" data-media-field><span>Card 3 image</span><input name="cert_card_3_img" value="<%= settings.cert_card_3_img %>" data-media></label>
      <h3 class="full-row">Footer — Service strip</h3>
      <label><span>Service 1 title</span><input name="service_1_title" value="<%= settings.service_1_title %>"></label>
      <label><span>Service 1 text</span><input name="service_1_text" value="<%= settings.service_1_text %>"></label>
      <label><span>Service 2 title</span><input name="service_2_title" value="<%= settings.service_2_title %>"></label>
      <label><span>Service 2 text</span><input name="service_2_text" value="<%= settings.service_2_text %>"></label>
      <label><span>Service 3 title</span><input name="service_3_title" value="<%= settings.service_3_title %>"></label>
      <label><span>Service 3 text</span><input name="service_3_text" value="<%= settings.service_3_text %>"></label>
      <div class="repeater full-row" data-repeater>
        <div class="repeater-head"><h3>Footer cities</h3><p>Cities listed in the footer. One city per row.</p></div>
        <div class="repeater-list" data-repeater-list>
          <% (settings.footer_city_list||['']).forEach(function(item){ %>
            <div class="repeater-item simple" data-repeater-item>
              <input name="footer_cities[]" value="<%= item %>" placeholder="e.g. Nairobi">
              <button type="button" class="repeater-remove" data-repeater-remove>Remove</button>
            </div>
          <% }) %>
        </div>
        <button type="button" class="btn btn-secondary" data-repeater-add>Add city</button>
      </div>
      <h3 class="full-row">Navigation &amp; misc</h3>
      <label><span>Mobile home label</span><input name="nav_home" value="<%= settings.nav_home %>"></label>
      <label><span>Mobile search label</span><input name="nav_search" value="<%= settings.nav_search %>"></label>
      <label><span>Mobile water label</span><input name="nav_water" value="<%= settings.nav_water %>"></label>
      <label><span>Mobile quote label</span><input name="nav_quote" value="<%= settings.nav_quote %>"></label>
      <label class="full-row"><span>Cart WhatsApp note</span><input name="cart_checkout_note" value="<%= settings.cart_checkout_note %>"></label>

<h3 class="full-row" style="margin-top:24px;border-top:1px solid var(--line);padding-top:18px">Branding & Logo</h3>
      <label class="full-row" data-media-field><span>Current logo</span><input name="brand_logo" value="<%= settings.brand_logo %>" data-media></label>
      <label class="full-row"><span>Or upload a new logo</span><input type="file" name="brand_logo_file" accept="image/*"></label>
      <label class="full-row"><span>Upload favicon image</span><input type="file" name="up__favicon" accept="image/png,image/x-icon,image/jpeg"></label>
      <label><span>Logo width (px)</span><input type="number" name="brand_logo_width" value="<%= settings.brand_logo_width %>"></label>
      <label><span>Brand tagline</span><input name="brand_tagline" value="<%= settings.brand_tagline %>"></label>

<h3 class="full-row" style="margin-top:24px;border-top:1px solid var(--line);padding-top:18px">Commerce</h3>
      <label><span>Currency code (display)</span><input name="currency_code" value="<%= settings.currency_code %>"></label>
      <label><span>Checkout mode</span><select name="checkout_mode"><option value="both" <%= settings.checkout_mode==='both'?'selected':'' %>>WhatsApp + form</option><option value="whatsapp" <%= settings.checkout_mode==='whatsapp'?'selected':'' %>>WhatsApp only</option><option value="form" <%= settings.checkout_mode==='form'?'selected':'' %>>Internal form only</option></select></label>
<div class="full-row"><button class="btn btn-primary">Save settings</button></div>
</form></main></body></html>
