vinistock/sail

<div id="guide-modal" style="display: none;">
  <h1>Reference Guide</h1>
  <hr>

  <details>
    <summary>
      <%= image_tag("sail/angle-left.svg") %>

      <div>
        <%= I18n.t("sail.searching") %>
        <label><%= I18n.t("sail.how_to_find_settings") %></label>
      </div>
    </summary>

      <div class="items-container">
        <ul>
          <li><%= I18n.t("sail.by_setting_name_html").html_safe %></li>
          <li><%= I18n.t("sail.by_group_html").html_safe %></li>
          <li><%= I18n.t("sail.by_cast_type_html").html_safe %></li>
          <li><%= I18n.t("sail.by_stale_html").html_safe %></li>
          <li><%= I18n.t("sail.by_recent_html").html_safe %></li>
        </ul>

        <p><%= I18n.translate("sail.click_title") %></p>
      </div>
  </details>
  <div class="clearfix"></div>

  <details>
    <summary>
      <%= image_tag("sail/angle-left.svg") %>

      <div>
        <%= I18n.t("sail.profiles") %>
        <label><%= I18n.t("sail.how_to_profiles") %></label>
      </div>
    </summary>

    <p><%= I18n.t("sail.profiles_can_be_used") %></p>
    <p><%= I18n.t("sail.profile_configuring") %></p>
  </details>
  <div class="clearfix"></div>

  <details>
    <summary>
      <%= image_tag("sail/angle-left.svg") %>

      <div>
        <%= I18n.t("sail.relevancy_score") %>
        <label><%= I18n.t("sail.how_to_relevancy_score") %></label>
      </div>
    </summary>

    <p><%= I18n.t("sail.relevancy_score_explanation") %></p>
  </details>
  <div class="clearfix"></div>

  <details>
    <summary>
      <%= image_tag("sail/angle-left.svg") %>

      <div>
        <%= I18n.t("sail.available_groups_and_types") %>
        <label><%= I18n.t("sail.how_to_groups_and_types") %></label>
      </div>
    </summary>

    <p>
      <%= I18n.t("sail.types_are") %>
      <b><%= settings.pluck(:cast_type).uniq.join(", ") %></b>
    </p>

    <p>
      <%= I18n.t("sail.groups_are") %>
      <b><%= settings.pluck(:group).uniq.join(", ") %></b>
    </p>
  </details>
  <div class="clearfix"></div>
</div>