<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text color="#3d4852" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="14px" />
      <mj-button background-color="#4338ca" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" color="#ffffff" font-size="14px" />
      <mj-class name="text-lg" font-size="24px" font-weight="bold" />
      <mj-class name="text-sm" font-size="14px" font-weight="normal" />
      <mj-class name="text-label" font-size="14px" font-weight="bold" color="#666666" />
      <mj-class name="trend-good" font-size="14px" font-weight="bold" color="#15803d" />
      <mj-class name="trend-bad" font-size="14px" font-weight="bold" color="#b91c1c" />
      <mj-column vertical-align="middle" />
      <mj-divider border-width="1px" border-color="#aaaaaa" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section padding="25px 0 0 0">
      <mj-column>
        <mj-text mj-class="text-sm" height="40px">
          Plausible Analytics
        </mj-text>
        <mj-text mj-class="text-lg">
          <%= @site.domain %>
        </mj-text>
        <mj-text mj-class="text-sm" padding="0 25px 0 25px">
          <%= @name %> Report (<%= Timex.format!(@query.date_range.last, "{D} {Mshort} {YYYY}") %>)
        </mj-text>
      </mj-column>
    </mj-section>

    <mj-section>
      <mj-column>
        <mj-divider />
      </mj-column>
    </mj-section>

    <mj-section padding="0">
      <mj-column>
        <mj-text mj-class="text-label">UNIQUE VISITORS</mj-text>
        <mj-text mj-class="text-lg" css-class="visitors">
          <%= PlausibleWeb.StatsView.large_number_format(@stats.visitors.value) %>
        </mj-text>
        <%= cond do %>
          <% @stats.visitors.change == nil -> %>
            <mj-text css-class="change-visitors" mj-class="text-sm">N/A</mj-text>
          <% @stats.visitors.change >= 0 -> %>
            <mj-text css-class="change-visitors" mj-class="text-sm trend-good">
            <%= "#{if @stats.visitors.change != 0, do: "+"}#{@stats.visitors.change}%" %>
            </mj-text>
          <% @stats.visitors.change < 0 -> %>
            <mj-text css-class="change-visitors" mj-class="text-sm trend-bad">
            <%= @stats.visitors.change %>%
            </mj-text>
        <% end %>
        <mj-spacer height="30px" />
      </mj-column>
      <mj-column>
        <mj-text mj-class="text-label">PAGEVIEWS</mj-text>
        <mj-text mj-class="text-lg" css-class="pageviews">
          <%= PlausibleWeb.StatsView.large_number_format(@stats.pageviews.value) %>
        </mj-text>
        <%= cond do %>
          <% is_nil(@stats.pageviews.change) -> %>
            <mj-text css-class="change-pageviews" mj-class="text-sm">N/A</mj-text>
          <% @stats.pageviews.change >= 0 -> %>
            <mj-text css-class="change-pageviews" mj-class="text-sm trend-good">
            <%= "#{if @stats.pageviews.change != 0, do: "+"}#{@stats.pageviews.change}%" %>
            </mj-text>
          <% @stats.pageviews.change < 0 -> %>
            <mj-text css-class="change-pageviews" mj-class="text-sm trend-bad">
            <%= @stats.pageviews.change %>%
            </mj-text>
        <% end %>
        <mj-spacer height="30px" />
      </mj-column>

      <mj-column>
        <mj-text mj-class="text-label">BOUNCE RATE</mj-text>
        <mj-text mj-class="text-lg">
          <%= @stats.bounce_rate.value %>
        </mj-text>

        <%= cond do %>
          <% @stats.bounce_rate.change == nil -> %>
            <mj-text css-class="change-bounce-rate" mj-class="text-sm">N/A</mj-text>
          <% @stats.bounce_rate.change <= 0 -> %>
            <mj-text css-class="change-bounce-rate" mj-class="text-sm trend-good">
            <%= @stats.bounce_rate.change %>%
            </mj-text>
          <% @stats.bounce_rate.change > 0 -> %>
            <mj-text css-class="change-bounce-rate" mj-class="text-sm trend-bad">
            +<%= @stats.bounce_rate.change %>%
            </mj-text>
        <% end %>
        <mj-spacer height="30px" />
      </mj-column>
    </mj-section>

    <mj-section padding="0">
      <mj-column>
        <mj-divider />
      </mj-column>
    </mj-section>

    <mj-section>
      <mj-group>
        <mj-column>
          <mj-text font-weight="bold">Referrer</mj-text>

          <%= for source <- @stats.sources do %>
          <mj-text css-class="referrer-name">
          <%= source[:source] %>
          </mj-text>
          <% end %>
        </mj-column>
        <mj-column>
          <mj-text font-weight="bold" align="right">Visitors</mj-text>

          <%= for source <- @stats.sources do %>
          <mj-text align="right" css-class="referrer-count">
          <%= PlausibleWeb.StatsView.large_number_format(source[:visitors]) %>
          </mj-text>
          <% end %>
        </mj-column>
      </mj-group>
    </mj-section>

    <mj-section padding="0">
      <mj-column>
        <mj-divider />
      </mj-column>
    </mj-section>

    <mj-section>
      <mj-group>
        <mj-column>
          <mj-text font-weight="bold">
            Page
          </mj-text>

          <%= for page <- @stats.pages do %>
          <mj-text css-class="page-name">
            <%= page[:page] %>
          </mj-text>
          <% end %>
        </mj-column>
        <mj-column>
          <mj-text font-weight="bold" align="right">
            Visitors
          </mj-text>

          <%= for page <- @stats.pages do %>
            <mj-text align="right" css-class="page-count">
            <%= PlausibleWeb.StatsView.large_number_format(page[:visitors]) %>
            </mj-text>
          <% end %>
        </mj-column>
      </mj-group>
    </mj-section>

    <%= if @login_link do %>
    <mj-section>
      <mj-column>
        <mj-button href="<%= PlausibleWeb.Router.Helpers.auth_url(PlausibleWeb.Endpoint, :login_form) %>">Login to view your dashboard</mj-button>
      </mj-column>
    </mj-section>
    <% end %>

    <mj-section>
      <mj-column>
        <mj-divider />
      </mj-column>
    </mj-section>
    <mj-section padding="0">
      <mj-column>
        <mj-text mj-class="text-sm" padding="0 25px 25px 25px">
          Don't want to receive these e-mails? <a href="<%= @unsubscribe_link %>">Click here</a> to unsubscribe.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
