{% extends "base.j2" -%}

{% block content -%}

{% if not request.shop %}

  {% if request.user and request.user.authenticated %}

  <section class="one-column well">
    {% if request.user.active_shop %}

    <b>{{ request.user.active_shop.name }}</b>

    <!-- TODO: build the home page dashboard for the currently active shop. -->

    {% else %}
    You don't have any shops, yet. You should create one.

    <br />
    <br />

    <a href="/s/new" class="shop-new-button mps-button mps-button-small">&#65291; New Shop</a>
    {% endif %}
  </section>

  {% else %}

  <section class="landing-hero animate-fade-in-up">
    <h1 class="type-display">Make it. Post it. Sell it.</h1>
    <p class="type-body-lg landing-hero-sub">Commission-free digital downloads &amp; physical product sales. Open source. Public domain.</p>
    <div class="landing-hero-ctas">
      <a href="/s/new" class="mps-button mps-button-green">&#65291; Open a Shop</a>
      <a href="/join-or-log-in" class="mps-button">Log In</a>
    </div>
  </section>

  <section class="landing-features animate-fade-in-up stagger-2">
    <div class="landing-feature-card well">
      <div class="landing-feature-icon">&#127917;</div>
      <h3 class="type-title">Watch Mode</h3>
      <p class="type-body-sm">SPA media channel. Visitors browse your catalog without page reloads.</p>
    </div>
    <div class="landing-feature-card well">
      <div class="landing-feature-icon">&#128176;</div>
      <h3 class="type-title">Five Payment Options</h3>
      <p class="type-body-sm">Stripe, PayPal, Monero, Dogecoin, and free coupons. Your money, your choice.</p>
    </div>
    <div class="landing-feature-card well">
      <div class="landing-feature-icon">&#128232;</div>
      <h3 class="type-title">Subscriptions &amp; Feeds</h3>
      <p class="type-body-sm">Email updates, RSS, and Atom feeds. Keep your audience in the loop.</p>
    </div>
    <div class="landing-feature-card well">
      <div class="landing-feature-icon">&#127912;</div>
      <h3 class="type-title">Creative Tools</h3>
      <p class="type-body-sm">Sandbox filters{% if request.karaoke_enabled %}, karaoke vocal isolation{% endif %}, and more. Built for creators.</p>
    </div>
    <div class="landing-feature-card well">
      <div class="landing-feature-icon">&#128200;</div>
      <h3 class="type-title">Analytics Dashboard</h3>
      <p class="type-body-sm">Views, sales, and traffic. Know what works without third-party trackers.</p>
    </div>
    <div class="landing-feature-card well">
      <div class="landing-feature-icon">&#128101;</div>
      <h3 class="type-title">Multi-tenant</h3>
      <p class="type-body-sm">Run multiple shops from one account. Custom domains included.</p>
    </div>
  </section>

  <section class="landing-cta-bottom animate-fade-in-up stagger-4">
    <div class="well landing-cta-card">
      <h2 class="type-headline-3">Ready to sell?</h2>
      <p class="type-body">No credit card required. Set up your shop in minutes.</p>
      <a href="/s/new" class="mps-button mps-button-green">&#65291; Open a Shop</a>
    </div>
  </section>

  {% endif %}

{% else %}

  {% if products %}
  <section class="serp{% if request.shop.grid_lanes_enabled %} grid-lanes-enabled{% endif %}">
  {% for product in products %}

    {% if product.is_ready %}
    <div class="serp-item">
      {% if "thumbnail1" in product.extensions %}
      <a href="{{ product.absolute_url(request) }}" rel="nofollow">
      <img src="{{ request.shop_cdn_endpoint }}/{{ product.s3_path }}/thumbnail1?ts={{ product.updated_timestamp }}" class="serp-thumbnail" />
      </a>
      {% endif %}
      <b><a href="{{ product.absolute_url(request) }}" class="shop-theme-link-color">{{ product.title }}</a></b>
      {% if product.is_sellable %}
      <br>
      <a href="{{ product.absolute_url(request) }}" rel="nofollow">${{ '{:,.2f}'.format(product.price) }}</a>
      {% endif %}
      <br />
      <a href="{{ product.shop.absolute_url(request) }}" rel="nofollow" class="shop-theme-link-color">{{ product.shop.name }}</a>
    </div>
    {% endif %}

  {% endfor %}

  </section>
  {% endif %}

  {% if request.shop and request.shop.subscriptions_enabled %}
  <section class="one-column subscribe-cta">
    <a href="/subscribe" class="shop-theme-link-color">Stay in the Loop — get email updates</a>
  </section>
  {% endif %}

{% endif %}

{%- endblock -%}
