gitcoinco/code_fund_ads

<div class="page-inner">
  <%= render "/shared/page_heading_with_subtitle",
    title: "Advertiser Dashboard",
    subtitle: "#{@start_date.to_s("mm/dd/yyyy")} &ndash; #{@end_date.to_s("mm/dd/yyyy")}".html_safe,
    datepicker: true %>

  <div class="page-section">
    <div class="metric-row">
      <%= render "/shared/widgets/stat_card",
        label: "Remaining Balance",
        value: current_organization.balance.format %>
      <%= render "/shared/widgets/stat_card",
        label: "Impressions",
        value: number_with_delimiter(Current.organization.impressions_count_for_organization(@start_date, @end_date)) %>
      <%= render "/shared/widgets/stat_card",
        label: "Clicks",
        value: number_with_delimiter(Current.organization.clicks_count_for_organization(@start_date, @end_date)) %>
      <%= render "/shared/widgets/stat_card",
        label: "CTR",
        value: number_to_percentage(Current.organization.click_rate_for_organization(@start_date, @end_date), precision: 2) %>
    </div>

    <div class="card-deck-xl">
      <div class="card card-fluid pb-3">
        <div class="card-header">Active Campaigns</div>
        <div class="list-group list-group-flush overflow-auto">
          <% @campaigns.each do |campaign| %>
            <div class="list-group-item">
              <div class="list-group-item-figure">
                  <%= link_to campaign.id, campaign, class: "tile tile-lg",
                    style: "background-color: #{campaign.bg_color.to_s}; color: #{campaign.text_color.to_s}" %>
              </div>
              <div class="list-group-item-body">
                <h5 class="card-title d-flex justify-content-between">
                  <%= link_to campaign.name, campaign %>
                  <span>
                    <span class="mention"><%= campaign.status.humanize %></span>
                    <%= tag.span "Fallback", class: "mention" if campaign.fallback? %>
                  </span>
                </h5>
                <p class="card-subtitle text-muted mb-1">
                  <%= campaign.percentage_complete_by_date %>% by Date
                  • <%= campaign.percentage_complete_by_budget %>% by Budget
                  • <%= campaign.total_remaining_budget.format %> Remaining
                  • <%= campaign.remaining_operative_days %> Days Left
                  <%= "• #{campaign.estimated_days_until_budget_consumed} based on budget" if campaign.consumed_operative_days > 3 %>
                </p>
                <div class="progress bg-muted" style="border-bottom: 1px solid #ffffff;">
                  <div class="progress-bar progress-bar-striped <%= "progress-bar-animated" if campaign.active? && campaign.percentage_complete_by_date == 100 %> bg-purple" role="progressbar" aria-valuenow="<%= campaign.percentage_complete_by_date %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= campaign.percentage_complete_by_date %>%">
                    <span class="sr-only"><%= campaign.percentage_complete_by_date %>% Complete by Date</span>
                  </div>
                </div>
                <div class="progress bg-muted">
                  <div class="progress-bar progress-bar-striped <%= "progress-bar-animated" if campaign.active? && campaign.percentage_complete_by_budget == 100 %> bg-green" role="progressbar" aria-valuenow="<%= campaign.percentage_complete_by_budget %>" aria-valuemin="0" aria-valuemax="100" style="width: <%= campaign.percentage_complete_by_budget %>%">
                    <span class="sr-only"><%= campaign.percentage_complete_by_budget %>% Complete by Date</span>
                  </div>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      </div>

      <div class="card card-fluid">
        <div class="card-header">Campaign Schedule</div>
        <div class="card-body">
          <%= tag.div "", data: {
              controller: "campaign-calendar",
              events: @campaigns.map { |campaign|
                {
                  title: campaign.name,
                  start: campaign.start_date,
                  end: campaign.end_date,
                  color: campaign.bg_color.to_s,
                  textColor: campaign.text_color.to_s
                }
              }.to_json
          } %>
          <div id="calendar" data-controller="campaign-calendar"></div>
        </div>
      </div>
    </div>
  </div>
</div>