<section class="phx-hero">
  <h3>
    <img class="logo" src="<%= Routes.static_path(@conn, "/images/favicon.png") %>"/>
    Shop Local
  </h3>
  <%= form_for @conn, Routes.page_path(@conn, :search), [method: "get", class: "optional-checkboxes"], fn f -> %>
    <%= text_input f, :search, placeholder: "What are you looking for?" %>

    <div class="toggle" toggle-for=".search-options">
      <div selected>+ Search Options</div>
      <div>- Search Options</div>
    </div>
    <div class="search-options" display-type="flex">
      <div class="location-options">
        <h4>Store Locations</h4>
        <%= for l <- locations do %>
          <div class="label-group">
            <%= checkbox f, l, checked: as_bool(@search[l]) %>
            <%= label f, l, to_label(l) %>
          </div>
        <% end %>
      </div>
      <div class="tag-options">
        <h4>Store Categories</h4>
        <%= for t <- tags do %>
          <div class="label-group">
            <%= checkbox f, t, checked: as_bool(@search[t]) %>
            <%= label f, t, to_label(t) %>
          </div>
        <% end %>
      </div>
      <div class="other-options">
        <h4>Other Options</h4>
        <div class="label-group">
          <%= checkbox f, :use_cache, checked: as_bool(@search["use_cache"]) %>
          <%= label f, :use_cache, to_label("use_cache") %>
        </div>
      </div>
    </div>
    </br>
    <%= submit "Search" %>
  <% end %>
</section>
<section class="row results">
  <%= if Map.has_key?(assigns, :results) do %>
    <%= if Enum.empty?(@results) do %>
      <div class="no-results">
      <h1 >Sorry, no results found.</h1>
      <p>It could help to try changing the search options, or to use different keywords.</p>
      </div>
    <%= else %>
      <ul>
      <%= for i <- @results do %>
          <li>
            <a href="<%= i.link %>">
              <b><%= i.name %></b>
              <i><%= view_price(i.price) %></i>
              &mdash; <%= i.provider %>
              <div class="product-content">
                <div class="product-image-container">
                  <%= if i.image_src != "" do %>
                    <img 
                     class="product-image"
                     loading="lazy" 
                     alt="Product Image"
                     src="<%= i.image_src %>"
                    >
                   <% end %>
                </div>
                <p><%= i.desc %></p>
              </div>
            </a>
          </li>
      <% end %>
      </ul>
    <% end %>
  <% end %>
</section>


<section class="row">
  <article class="column">
    <h2>Regions</h2>
    <ul>
      <li>
        <a href="https://business.albanychamber.com/list/">Albany</a>
      </li>
      <li>
        <a href="https://www.visitcorvallis.com/shopping">Corvallis</a>
      </li>
      <li>
        <a href="https://cm.mcminnville.org/list">McMinnville</a>
      </li>
    </ul>
  </article>
  <article class="column">
    <h2>Stores</h2>
    <ul>
      <li>
        <a href="https://burstschocolates.com/">Bursts Chocolates</a>
      </li>
      <li>
        <a href="https://www.browsersbookstore.com/">Browsers Bookstore (Corvallis)</a>
      </li>
      <li>
        <a href="https://www.clothes-tree.com/">The Clothes Tree</a>
      </li>
      <li>
        <a href="https://conundrum.house/">Conundrum House</a>
      </li>
      <li>
        <a href="https://grassrootsbookstore.com/">Grassroots Bookstore</a>
      </li>
      <li>
        <a href="https://merriartist.com/">The Merri Artist</a>
      </li>
      <li>
        <a href="https://oregoncoffeeandtea.com/">Oregon Coffee &amp; Tea</a>
      </li>
      <li>
        <a href="https://www.peaksportscorvallis.com">Peak Sports</a>
      </li>
      <li>
        <a href="https://pegasusgames.com">Pegasus Games</a>
      </li>
      <li>
        <a href="https://www.restylealbany.com/">ReStyle Albany</a>
      </li>
      <li>
        <a href="https://www.restylecorvallis.com/">ReStyle Corvallis</a>
      </li>
      <li>
        <a href="http://www.robnettshardware.com/">Robnett's Hardware</a>
      </li>
      <li>
        <a href="https://www.thetoyfactory.us">The Toy Factory</a>
      </li>
    </ul>
  </article>
  <article class="column">
    <h2>More Info</h2>
    <ul>
      <li>
        <a href="/about">About this site</a>
      </li>
    </ul>
  </article>
</section>