<%# locals: ()  %>

<section>
  <h3><%= t('home.explain_user_scripts_heading') %></h3>

  <p><%= t('home.explain_user_scripts_html', site_name: site_name) %></p>
</section>

<section id="home-step-1">
  <h3><%= t('home.installing_step1_header') %></h3>

  <figure>
    <%= vite_image_tag('images/tampermonkey-manage.webp', width: 300, height: 177) %>
    <figcaption><%= t('home.installing_step1_caption') %></figcaption>
  </figure>

  <%= it('home.installing_step1_description_html') %>

  <p>
    <span class="browser-list-selector browser-list-selector-active" data-for="desktop-browser-list"><%= t('home.desktop_browsers.title') %></span>
    <span class="browser-list-selector" data-for="android-browser-list"><%= t('home.android_browsers.title') %></span>
    <span class="browser-list-selector" data-for="ios-browser-list"><%= t('home.ios_browsers.title') %></span>
  </p>

  <div id="desktop-browser-list" class="browser-list">
    <%= it('home.desktop_browsers.browser_list_html', chrome_tampermonkey_link: 'https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo', chrome_violentmonkey_link: 'https://chrome.google.com/webstore/detail/violent-monkey/jinjaccalgkegednnccohejagnlnfdag', firefox_greasemonkey_link: 'https://addons.mozilla.org/firefox/addon/greasemonkey/', firefox_tampermonkey_link: 'https://addons.mozilla.org/firefox/addon/tampermonkey/', firefox_violentmonkey_link: 'https://addons.mozilla.org/firefox/addon/violentmonkey/', safari_tampermonkey_link: 'https://www.tampermonkey.net/?browser=safari', edge_tampermonkey_link: 'https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd', edge_violentmonkey_link: 'https://microsoftedge.microsoft.com/addons/detail/violentmonkey/eeagobfjdenkkddmbclomhiblgggliao', opera_tampermonkey_link: 'https://addons.opera.com/extensions/details/tampermonkey-beta/', opera_violentmonkey_link: 'https://violentmonkey.github.io/get-it/', maxthon_violentmonkey_link: 'http://extension.maxthon.com/detail/index.php?view_id=1680', dolphin_tampermonkey_link: 'https://play.google.com/store/apps/details?id=net.tampermonkey.dolphin', uc_tampermonkey_link: 'https://www.tampermonkey.net/?browser=ucweb&ext=dhdg', safari_userscripts_link: 'https://apps.apple.com/app/userscripts/id1463298887', adguard_link: 'https://adguard.com/') %>
  </div>

  <div id="android-browser-list" class="browser-list">
    <% locale_specific_android_browsers = nil
    if request_locale.code == 'zh-CN'
      locale_specific_android_browsers = <<~HTML.html_safe
        <li><a href="https://viayoo.com/">Via 浏览器</a></li>
        <li><a href="https://www.lemurbrowser.com/">狐猴浏览器</a>：<a href="https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd">Tampermonkey</a></li>
      HTML
    end %>
    <%= it('home.android_browsers.browser_list_html', firefox_greasemonkey_link: 'https://addons.mozilla.org/firefox/addon/greasemonkey/', firefox_tampermonkey_link: 'https://addons.mozilla.org/firefox/addon/tampermonkey/', firefox_violentmonkey_link: 'https://addons.mozilla.org/firefox/addon/violentmonkey/', maxthon_violentmonkey_link: 'http://extension.maxthon.com/detail/index.php?view_id=1680', dolphin_tampermonkey_link: 'https://play.google.com/store/apps/details?id=net.tampermonkey.dolphin', uc_tampermonkey_link: 'https://www.tampermonkey.net/?browser=ucweb&ext=dhdg', safari_userscripts_link: 'https://apps.apple.com/app/userscripts/id1463298887', xbrowser_link: 'https://www.xbext.com', einkbro_link: 'https://plateaukao.github.io/einkbro/', edge_tampermonkey_link: 'https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd', locale_specific_browsers: locale_specific_android_browsers) %>
  </div>

  <div id="ios-browser-list" class="browser-list">
    <%= it('home.ios_browsers.browser_list_html', safari_tampermonkey_link: 'https://www.tampermonkey.net/?browser=safari', safari_userscripts_link: 'https://apps.apple.com/app/userscripts/id1463298887', gear_link: 'https://gear4.app/', teak_link: 'https://teakbrowser.app/') %>
  </div>
</section>

<section id="home-step-2">
  <h3><%= t('home.installing_step2_header') %></h3>

  <figure>
    <%= vite_image_tag('images/install-button-example.webp', width: 300, height: 213) %>
    <figcaption><%= t('home.installing_step2_caption') %></figcaption>
  </figure>

  <% highlighted_scripts_html = capture do %>
    <ul>
      <% highlighted_scripts(restrict_to_ad_method: @ad_method&.ga? ? 'ga' : nil).each do |script| %>
        <li><%= render_script(script) %> - <span class="script-description"><%= script.description(request_locale) %></span></li>
      <% end %>
    </ul>
  <% end %>
  <%= it('home.installing_step2_description_html', browse_link: scripts_path, highlighted_scripts_list: highlighted_scripts_html) %>

</section>

<section id="home-step-3">
  <h3><%= t('home.installing_step3_header') %></h3>

  <%= t('home.installing_step3_description_html') %>
</section>

<% if @ad_method&.ga? %>
  <div class="ad <%= @ad_method.css_class %>" id="home-ad">
    <div class="ad-content">
      <ins class="adsbygoogle"
           style="display:block; text-align:center;"
           data-ad-layout="in-article"
           data-ad-format="fluid"
           data-ad-client="ca-pub-2247465624637408"
           data-ad-slot="2593917175"></ins>
      <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
  </div>
<% end %>
