<%- # License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later -%>
<%= content_for(:title_prefix) { "#{@campaign.name} - #{@campaign.nonprofit.name} | ".html_safe } %>
<% content_for(:fixed_position_cta_hidden) {'hidden'} %>
<%= content_for(:meta_description) {raw @campaign.summary} %>
<% @brand_color = @nonprofit.brand_color ? @nonprofit.brand_color : nil %>

<%= content_for :javascripts do %>
	<script>
		app.campaign_id = <%= @campaign.id %>
    app.campaign = <%= raw(@campaign.to_json) %>
		app.header_image_url = '<%= @campaign_background_image %>'
    app.campaign_end_datetime = '<%= @campaign.end_datetime %>'
		app.timezone = '<%= @timezone %>'
    app.end_date_time = app.campaign_end_datetime
    app.hide_activities = <%= @campaign.hide_activity_feed %>
		app.days_remaining = '<%= @campaign.days_left %>'
		app.recurring_fund = <%= @campaign.recurring_fund? %>
    app.vimeo_id = "<%= @campaign.vimeo_video_id ? @campaign.vimeo_video_id : '' %>"
		app.current_campaign_editor = <%= current_campaign_editor? %>
		appl.def('has_video', <%= @campaign.video_url.present? %>)
    appl.def('campaign_is_deleted', <%= @campaign.deleted || false %>)
		appl.def('has_main_image', <%= @campaign.main_image.file.present? %>)
	</script>
  <%= render 'schema', campaign: @campaign, url: @url %>
	<%= render 'common/froala' if current_campaign_editor? %>

	<%= IncludeAsset.js '/client/js/campaigns/show/page.js' %>
<% end %>

<%= content_for :stylesheets do %>
	<%= stylesheet_link_tag 'campaigns/show/page' %>
	<%= stylesheet_link_tag 'campaigns/edit/page' %>
  <style>
    .force-
    .ios-force-absolute-positioning {
      position: absolute !important;
    }
  </style>
<% end %>

<% content_for :head do %>
	<link rel="canonical" href='<%= @url %>' />
<% end %>

<%= content_for :facebook_tags do %>
	<meta property="og:title" content="<%= raw @campaign.name %>">
	<meta property="og:description" content="<%= @campaign.summary.present? ? raw(@campaign.summary) : raw(@campaign.name) %>">
	<meta property="og:image" content="<%= @campaign.main_image_url(:normal) %>">
<% end %>

<%= content_for :twitter_tags do %>
	<meta property="twitter:title" content="<%= raw @campaign.name %>">
	<meta property="twitter:description" content="<%= raw @campaign.summary %>">
	<meta property="twitter:image" content="<%= @campaign.main_image_url(:normal) %>">
<% end %>

<% if current_campaign_editor? %>
  <%= render 'admin_top_nav' %>
<% end %>

<%= render '/components/trial_bar' if QueryBillingSubscriptions.currently_in_trial?(@nonprofit.id) %>

<%= render 'components/fundraising_pages/header',
	image_url: @campaign_background_image,
	is_editor: current_campaign_editor?,
	hide_title:  @campaign.hide_title && @campaign_background_image,
	header_content_partial: 'header_content' %>

<%= render 'components/preview_mode_notification' %>

<div class="container u-marginTop--15 <%=  @brand_color ? 'is-branded' : '' %>" data-id='<%= @campaign.id %>'>


	<section class='box'>
		<%= render 'campaign_media' %>
	</section>

	<section class='box-r'>

    <% if current_campaign_editor? %>
      <!-- Campaign editor gift option management modal -->
      <button class='button edit u-width--full u-marginBottom--15'>
        <!--= on 'click' (open_modal 'manageGiftOptionsModal') -->
        <i class='fa fa-gift'></i> Manage Gift Options
      </button>
    <% end %>
 
    <!-- flimflam gift options javascript gets rendered into this div: -->
    <div class='ff-sidebar'></div>

		<aside class='u-marginTop--15 pastelBox--grey'>
			<header>Promote This Campaign</header>
			<div class='pastelBox-body'>
				<%= render 'common/social_buttons' %>
			</div>
		</aside>

    <% unless current_campaign_editor? %>
      <aside class='u-marginTop--15'>
        <a class='button u-width--full' target='_blank' if-branded='background-color, dark' href='/peer-to-peer?npo_id=<%=@nonprofit.id %>'>
          Start Your Own Campaign for <%= @nonprofit.name %>
        </a>
      </aside>
    <% end %>

	</section>

	<section class='box'>

		<div id='js-campaignBody' class='editable' data-path='/nonprofits/<%= @nonprofit.id %>/campaigns/<%= @campaign.id %>.json' data-key='campaign[body]'>
			<%= raw @campaign.body %>
		</div>

		<% unless @campaign.hide_activity_feed %>
			<div class='u-marginTop--15 showWhenMobile'>
				<%= render 'components/activity_feed' %>
			</div>
		<% end %>
	</section>
</div>


<% if current_campaign_editor? %>
	<%= render 'settings_modal' %>
	<%= render 'video_modal' %>
	<%= render 'donations/campaign_new_offline_modal' %>
	<%= render 'campaign_gift_options/manage_modal'%>
	<%= render 'campaign_gift_options/form_modal'%>
	<%= render 'components/upload_background_image',
		end_point: "/nonprofits/#{@nonprofit.id}/campaigns/#{@campaign.id}",
		image_url: @campaign_background_image,
		input_name: 'campaign[background_image]' %>
  <%= render 'components/custom_receipt_modal',
    title: 'Campaign Receipt Message',
    type: 'campaign',
    path: nonprofit_campaign_path(@nonprofit, @campaign),
    key: 'campaign[receipt_message]',
    text: @campaign.receipt_message %>
  <%= render 'components/duplicate_fundraiser_modal', type: 'campaign' %>
<% end %>

<%= render 'components/share_modal', name: @campaign.name, type: 'campaign' %>
<%= render 'common/email_share_modal', fundraiser: @campaign.name, fundraiser_url: @url  %>