src/Bidcoz/Bundle/FrontendBundle/Resources/views/Campaign/index.html.twig line 1

Open in your IDE?
  1. {% extends '@BidcozFrontend/campaign.html.twig' %}
  3. {# PRIMARY COMPONENTS #}
  4. {% set hasTickets = campaign.hasTickets and is_granted('TICKET', organization) %}
  5. {% set hasRegistrations = campaign.hasRegistrations and is_granted('REGISTRATION', organization) %}
  6. {% set hasAuction = campaign.hasAuction and is_granted('AUCTION', organization) %}
  7. {% set hasFundDrive = campaign.fundDriveEnabled and is_granted('FUND_DRIVE', organization) %}
  8. {% set hasCashDonations = is_granted('DONATION', organization) and campaign.hasCashDonations and campaign.showCashDonations %}
  9. {% set hasItemDonations = is_granted('PROCUREMENT', organization) and campaign.hasItemDonations %}
  10. {% set hasDonation = hasCashDonations or hasItemDonations %}
  11. {% set hasFundANeed = campaign.hasFundANeed and is_granted('FUND_A_NEED', organization) %}
  12. {% set hasShop = campaign.hasShop and is_granted('SHOP', organization) %}
  13. {% set hasRaffle = campaign.raffleActive and is_granted('RAFFLE', organization) %}
  14. {% set hasPaddleRaise = campaign.hasPaddleRaise and is_granted('PADDLE_RISE', organization) and campaign.showPaddleRaiseMobileBtn %}
  15. {% set hasSponsorships = campaign.hasSponsorship and campaign.sponsorshipSignup and is_granted('SPONSORSHIP', organization) %}
  16. {% set hasMemberships = campaign.membershipEnabled and campaign.membershipLevels|length and is_granted('MEMBERSHIP', organization) %}
  17. {% set hasVolunteer = campaign.hasVolunteers and is_granted('VOLUNTEER', organization) %}
  19. {# COMPONENT HELPERS #}
  20. {% set hasFeaturedItems = hasAuction and featuredItems|length %}
  21. {% set hasShopItems = hasShop and shopItems|length %}
  22. {% set hasFundANeedItems = hasFundANeed and fundANeedItems|length %}
  24. {% block homepageClass %} is-homepage{% endblock %}
  26. {% block beforeContent '' %}
  28. {% block homepageIntro %}
  29.     <div class="campaign-navigation d-flex justify-content-end align-items-center home-intro-campaign-nav">
  30.         {% if campaign.logo %}
  31.             <div class="campaign-logo flex-grow-1 home-intro-logo">
  32.                 <img src="{{ vich_uploader_asset(campaign.logo, 'file') }}" class="logo" />
  33.             </div>
  34.         {% else %}
  35.             <div class="campaign-name-container flex-grow-1">
  36.                 <h4 class="campaign-name">{{ campaign.name }}</h4>
  37.             </div>
  38.         {% endif %}
  40.         <div class="campaign-navigation-links flex-shrink-0">
  41.             <a href="#" class="campaign-navigation-links-toggle d-lg-none">
  42.                 <i class="fas fa-bars icon-sm"></i>
  43.             </a>
  44.             <ul class="navigation-links align-items-center justify-content-end d-none d-lg-flex">
  45.                 {% if campaign is defined and campaign is not null %}
  46.                     {% include '@BidcozCore/Layout/Blocks/menu/auction.html.twig' %}
  47.                 {% endif %}
  48.             </ul>
  49.         </div>
  50.     </div>
  52.     {% if campaign.bannerImage or campaign.video.url is not null %}
  53.         {% if campaign.video.url is not null %}
  54.             <div class="campaign-banner row align-items-center justify-content-center">
  55.                 <div id="{{campaign.video.url}}" class="video" style="width:100%; height:100%;">
  56.                     <div id="video-cover"
  57.                         class="campaign-banner row align-items-center justify-content-center mx-0">
  58.                         {% if campaign.bannerImage is defined and campaign.bannerImage %}
  59.                             <img src="{{ vich_uploader_asset(campaign.bannerImage, 'file') }}" />
  60.                         {% endif %}
  61.                     </div>
  62.                     <div id="youtube-container" style="height:100%; display: none;">
  63.                         <div id="player"><!-- youtube video will replace this div --></div>
  64.                     </div>
  65.                     <h6 id="play" class="play-btn text-center align-items-center control-btn" disabled>
  66.                         <svg version="1.1" id="fi_375" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30.051 30.051" style="enable-background:new 0 0 30.051 30.051;" xml:space="preserve">
  67.                             <path d="M19.982,14.438l-6.24-4.536c-0.229-0.166-0.533-0.191-0.784-0.062c-0.253,0.128-0.411,0.388-0.411,0.669v9.069
  68.                                 c0,0.284,0.158,0.543,0.411,0.671c0.107,0.054,0.224,0.081,0.342,0.081c0.154,0,0.31-0.049,0.442-0.146l6.24-4.532
  69.                                 c0.197-0.145,0.312-0.369,0.312-0.607C20.295,14.803,20.177,14.58,19.982,14.438z"></path>
  70.                             <path d="M15.026,0.002C6.726,0.002,0,6.728,0,15.028c0,8.297,6.726,15.021,15.026,15.021c8.298,0,15.025-6.725,15.025-15.021
  71.                                 C30.052,6.728,23.324,0.002,15.026,0.002z M15.026,27.542c-6.912,0-12.516-5.601-12.516-12.514c0-6.91,5.604-12.518,12.516-12.518
  72.                                 c6.911,0,12.514,5.607,12.514,12.518C27.541,21.941,21.937,27.542,15.026,27.542z"></path>
  73.                         </svg>
  74.                     </h6>
  75.                     <div id="controls" class="d-flex ml-5" style="display: none !important;">
  76.                         <div class="d-flex">
  77.                             <h6 id="rewind" class="col control-btn p-1">
  78.                                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256,512C114.61,512,0,397.38,0,256S114.61,0,256,0,512,114.61,512,256C511.83,397.32,397.32,511.83,256,512Zm1-467.88C139.43,44.12,44.12,139.43,44.12,257S139.43,469.87,257,469.87,469.87,374.57,469.87,257,374.51,44.25,257,44.12Z"/><path d="M256,352.8a13.81,13.81,0,0,1-9-3.33l-96.8-83a13.83,13.83,0,0,1-1.5-19.5,13.28,13.28,0,0,1,1.5-1.5l96.8-83A13.82,13.82,0,0,1,269.83,173V339A13.83,13.83,0,0,1,256,352.8ZM180.45,256l61.72,52.91V203.09Z"/><path d="M394.29,352.8a13.81,13.81,0,0,1-9-3.33l-96.8-83A13.83,13.83,0,0,1,287,247a13.28,13.28,0,0,1,1.5-1.5l96.8-83A13.82,13.82,0,0,1,408.12,173V339A13.83,13.83,0,0,1,394.29,352.8ZM318.74,256l61.72,52.91V203.09Z"/><path d="M117.71,352.8A13.83,13.83,0,0,1,103.88,339V173a13.83,13.83,0,0,1,27.66,0V339A13.83,13.83,0,0,1,117.71,352.8Z"/></svg>                            </h6>
  79.                             <h6 id="pause" class="col control-btn p-1">
  80.                                 <svg version="1.1" id="fi_16427" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 271.953 271.953" style="enable-background:new 0 0 271.953 271.953;" xml:space="preserve">
  81.                                     <path d="M135.977,271.953c75.097,0,135.977-60.879,135.977-135.977S211.074,0,135.977,0S0,60.879,0,135.977
  82.                                         S60.879,271.953,135.977,271.953z M135.977,21.756c62.979,0,114.22,51.241,114.22,114.22s-51.241,114.22-114.22,114.22
  83.                                         s-114.22-51.241-114.22-114.22S72.992,21.756,135.977,21.756z"></path>
  84.                                     <path d="M110.707,200.114c7.511,0,13.598-6.086,13.598-13.598V83.174c0-7.511-6.086-13.598-13.598-13.598
  85.                                         c-7.511,0-13.598,6.086-13.598,13.598v103.342C97.109,194.028,103.195,200.114,110.707,200.114z"></path>
  86.                                     <path d="M165.097,200.114c7.511,0,13.598-6.086,13.598-13.598V83.174c0-7.511-6.086-13.598-13.598-13.598
  87.                                         S151.5,75.663,151.5,83.174v103.342C151.5,194.028,157.586,200.114,165.097,200.114z"></path>
  88.                                 </svg>
  89.                             </h6>
  90.                             {# leaving these incase we want play and stop for some reason #}
  91.                             {# <h6 id="play" class="col control-btn p-1">
  92.                                 <svg version="1.1" id="fi_375" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30.051 30.051" style="enable-background:new 0 0 30.051 30.051;" xml:space="preserve">
  93.                                     <path d="M19.982,14.438l-6.24-4.536c-0.229-0.166-0.533-0.191-0.784-0.062c-0.253,0.128-0.411,0.388-0.411,0.669v9.069
  94.                                         c0,0.284,0.158,0.543,0.411,0.671c0.107,0.054,0.224,0.081,0.342,0.081c0.154,0,0.31-0.049,0.442-0.146l6.24-4.532
  95.                                         c0.197-0.145,0.312-0.369,0.312-0.607C20.295,14.803,20.177,14.58,19.982,14.438z"></path>
  96.                                     <path d="M15.026,0.002C6.726,0.002,0,6.728,0,15.028c0,8.297,6.726,15.021,15.026,15.021c8.298,0,15.025-6.725,15.025-15.021
  97.                                         C30.052,6.728,23.324,0.002,15.026,0.002z M15.026,27.542c-6.912,0-12.516-5.601-12.516-12.514c0-6.91,5.604-12.518,12.516-12.518
  98.                                         c6.911,0,12.514,5.607,12.514,12.518C27.541,21.941,21.937,27.542,15.026,27.542z"></path>
  99.                                 </svg>
  100.                             </h6> #}
  101.                             {# <h6 id="stop" class="col control-btn p-1">
  102.                                 <svg version="1.1" id="fi_2914" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30.05 30.05" style="enable-background:new 0 0 30.05 30.05;" xml:space="preserve">
  103.                                     <path d="M18.993,10.688h-7.936c-0.19,0-0.346,0.149-0.346,0.342v8.022c0,0.189,0.155,0.344,0.346,0.344
  104.                                         h7.936c0.19,0,0.344-0.154,0.344-0.344V11.03C19.336,10.838,19.183,10.688,18.993,10.688z"></path>
  105.                                     <path d="M15.026,0C6.729,0,0.001,6.726,0.001,15.025S6.729,30.05,15.026,30.05
  106.                                         c8.298,0,15.023-6.726,15.023-15.025S23.324,0,15.026,0z M15.026,27.54c-6.912,0-12.516-5.604-12.516-12.515
  107.                                         c0-6.914,5.604-12.517,12.516-12.517c6.913,0,12.514,5.603,12.514,12.517C27.54,21.936,21.939,27.54,15.026,27.54z"></path>
  108.                                 </svg>
  109.                             </h6> #}
  110.                         </div>
  111.                     </div>
  112.                 </div>
  113.         {% else %}
  114.             <div class="campaign-banner row align-items-center justify-content-center">
  115.                 <img src="{{ vich_uploader_asset(campaign.bannerImage, 'file') }}" />
  116.         {% endif %}
  117.             {% if theme.themeName == 'wide' %}
  118.                 <div class="banner-overlay-content pb-2">
  119.                     <h1>{{ campaign.name }}</h1>
  120.                     <h5 class="mb-4 mt-n3">{{ organization.name }}</h5>
  122.                     <div class="campaign-actions flex-wrap align-items-center justify-content-center d-none d-md-flex pb-4">
  123.                         {% if hasTickets and tickets_available(campaign) %}
  124.                             {# <div class="tooltip-container"> #}
  125.                                 <a id="buy-tickets" class="btn btn-ghost mx-2 my-1 tooltip-trigger{{ tickets_available(campaign) ? '' : ' disabled' }}" href="{{ path('campaign_tickets', campaignParams) }}">{{ campaign.ticketDisplayName }}s</a>
  126.                                 {# if not  %}
  127.                                     <div class="tooltip">
  128.                                         <strong>SOLD OUT</strong>
  129.                                         <br />
  130.                                         Please contact the organization for further assistance.
  131.                                     </div>
  132.                                 {% endif #}
  133.                             {# </div> #}
  134.                         {% endif %}
  135.                         {% if hasRegistrations %}
  136.                             <a href="{{ path('campaign_registrations', campaignParams) }}" class="btn btn-ghost mx-2 my-1">Register</a>
  137.                         {% endif %}
  138.                         {% if hasAuction and campaign.auctionAvailable %}
  139.                             <a id="view-auction" class="btn btn-ghost mx-2 my-1" href="{{ path('auction_catalog', campaignParams) }}">Auction</a>
  140.                         {% endif %}
  141.                         {% if hasFundDrive %}
  142.                             <a id="view-fund-drive" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_donate_levels', campaignParams) }}">Appeal</a>
  143.                         {% endif %}
  144.                         {% if hasCashDonations and hasItemDonations %}
  145.                             <a id="donate" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_donate', campaignParams) }}">Donate</a>
  146.                         {% elseif hasItemDonations %}
  147.                             <a id="donate" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_donate_item', campaignParams) }}">Donate</a>
  148.                         {% elseif hasCashDonations %}
  149.                             <a id="donate" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_donate_cash', campaignParams) }}">Donate</a>
  150.                         {% endif %}
  151.                         {% if hasFundANeed %}
  152.                             <a id="view-fund-a-need" class="btn btn-ghost mx-2 my-1" href="{{ path('fund_a_need_catalog', campaignParams) }}">{{ campaign.fundANeedDisplayName }}</a>
  153.                         {% endif %}
  154.                         {% if hasShop %}
  155.                             <a id="view-shop" class="btn btn-ghost mx-2 my-1" href="{{ path('shop_catalog', campaignParams) }}">{{ campaign.shopDisplayName }}</a>
  156.                         {% endif %}
  157.                         {% if hasRaffle %}
  158.                             <a id="view-raffle" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_raffle', campaignParams) }}">{{ campaign.raffleDisplayName }}</a>
  159.                         {% endif %}
  160.                         {% if hasPaddleRaise %}
  161.                             <a id="view-paddle-raise" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_paddle_raise', campaignParams) }}">Paddle Raise</a>
  162.                         {% endif %}
  163.                         {% if hasSponsorships %}
  164.                             <a id="view-sponsorships" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_sponsor', campaignParams) }}">Become a Sponsor</a>
  165.                         {% endif %}
  166.                         {% if hasMemberships %}
  167.                             <a id="view-memberships" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_membership_levels', campaignParams) }}">Become a Member</a>
  168.                         {% endif %}
  169.                         {% if hasMemberships %}
  170.                             <a id="view-volunteer" class="btn btn-ghost mx-2 my-1" href="{{ path('campaign_volunteer', campaignParams) }}">Volunteer</a>
  171.                         {% endif %}
  172.                     </div>
  173.                 </div>
  174.             {% endif %}
  175.         </div>
  176.     {% endif %}
  178.     <div class="campaign-info row">
  179.         {% if campaign.logo and theme.themeName != 'wide' %}
  180.             <div class="campaign-image d-none d-md-block col-md-3">
  181.                 <div id="campaign-logo" class="image-container" style="background-image: url('{{ vich_uploader_asset(campaign.logo, 'file') }}');"></div>
  182.             </div>
  183.         {% endif %}
  185.         {% if theme.themeName != 'wide' %}
  186.             <div class="campaign-title flex-grow-1 {% if campaign.logo %}col-md-6{% else %}col-md-9{% endif %}">
  187.                 <h3>{{ campaign.name }}</h3>
  188.                 <h6 class="mt-n3">{{ organization.name }}</h6>
  189.             </div>
  190.         {% endif %}
  192.         <div class="campaign-actions col-md-3{{ theme.themeName == 'wide' ? ' d-md-none' : '' }}">
  193.             {% if hasAuction and campaign.auctionAvailable %}
  194.                 <a id="view-auction" class="btn secondary full-width my-1" href="{{ path('auction_catalog', campaignParams) }}">Auction</a>
  195.             {% endif %}
  196.             {% if hasCashDonations and hasItemDonations %}
  197.                 <a id="donate" class="btn secondary full-width my-1" href="{{ path('campaign_donate', campaignParams) }}">Donate</a>
  198.             {% elseif hasItemDonations %}
  199.                 <a id="donate" class="btn secondary full-width my-1" href="{{ path('campaign_donate_item', campaignParams) }}">Donate</a>
  200.             {% elseif hasCashDonations %}
  201.                 <a id="donate" class="btn secondary full-width my-1" href="{{ path('campaign_donate_cash', campaignParams) }}">Donate</a>
  202.             {% endif %}
  203.             <!-- CrewUps Component -->
  204.             {% if hasVolunteer %}
  205.                 <a id="view-volunteer" class="btn secondary full-width my-1" href="{{ path('campaign_volunteer', campaignParams) }}">Crew Up</a>
  206.             {% endif %}
  207.             {% if hasFundANeed %}
  208.                 <a id="view-fund-a-need" class="btn secondary full-width my-1" href="{{ path('fund_a_need_catalog', campaignParams) }}">{{ campaign.fundANeedDisplayName }}</a>
  209.             {% endif %}
  210.             {% if hasFundDrive %}
  211.                 <a id="view-fund-drive" class="btn secondary full-width my-1" href="{{ path('campaign_donate_levels', campaignParams) }}">Appeal</a>
  212.             {% endif %}
  213.             {% if hasMemberships %}
  214.                 <a id="view-memberships" class="btn secondary full-width my-1" href="{{ path('campaign_membership_levels', campaignParams) }}">Memberships</a>
  215.             {% endif %}
  216.             {% if hasShop %}
  217.                 <a id="view-shop" class="btn secondary full-width my-1" href="{{ path('shop_catalog', campaignParams) }}">{{ campaign.shopDisplayName }}</a>
  218.             {% endif %}
  219.             {% if hasPaddleRaise %}
  220.                 <a id="view-paddle-raise" class="btn secondary full-width my-1" href="{{ path('campaign_paddle_raise', campaignParams) }}">Paddle Raise</a>
  221.             {% endif %}
  222.             {% if hasRaffle %}
  223.                 <a id="view-raffle" class="btn secondary full-width my-1" href="{{ path('campaign_raffle', campaignParams) }}">{{ campaign.raffleDisplayName }}</a>
  224.             {% endif %}
  225.             {% if hasRegistrations %}
  226.                 <a href="{{ path('campaign_registrations', campaignParams) }}" class="btn secondary full-width my-1">Register</a>
  227.             {% endif %}
  228.             {% if hasSponsorships %}
  229.                 <a id="view-sponsorships" class="btn secondary full-width my-1" href="{{ path('campaign_sponsor', campaignParams) }}">Sponsorships</a>
  230.             {% endif %}
  231.             {% if hasTickets and tickets_available(campaign) %}
  232.                 {# <div class="tooltip-container"> #}
  233.                     <a id="buy-tickets" class="btn secondary full-width my-1 tooltip-trigger{{ tickets_available(campaign) ? '' : ' disabled' }}" href="{{ path('campaign_tickets', campaignParams) }}">{{ campaign.ticketDisplayName }}s</a>
  234.                     {# if not tickets_available(campaign) %}
  235.                         <div class="tooltip">
  236.                             <strong>SOLD OUT</strong>
  237.                             <br />
  238.                             Please contact the organization for further assistance.
  239.                         </div>
  240.                     {% endif #}
  241.                 {# </div> #}
  242.             {% endif %}
  243.         </div>
  244.     </div>
  245. {% endblock %}
  247. {% block content %}
  248.     {# if campaign.hasRegistrations %}
  249.         <div class="buy-buttons-container panel">
  250.             <div class="panel-body">
  251.                 {% if campaign.hasRegistrations and is_granted('REGISTRATION', organization) %}
  252.                     {% if campaign is registrations_purchasable %}
  253.                         <div class="buy">
  254.                             <a href="{{ path('campaign_registrations', campaignParams) }}" class="btn btn-primary">Register</a>
  255.                         </div>
  256.                     {% else %}
  257.                         <p>Applications are no longer available.  Please <a href="{{ path('campaign_contact', campaignParams) }}">contact the organization</a> for further assistance.</p>
  258.                     {% endif %}
  259.                 {% endif %}
  260.             </div>
  261.         </div>
  262.     {% endif #}
  264.     {% if campaign.homepageContent %}
  265.         <div class="panel">
  266.             <div class="panel-body mb-5">
  267.                 {# <div class="d-flex justify-content-between align-items-center">
  268.                     <h4>Overview</h4>
  269.                 </div> #}
  270.                 <div class="caption {% if not campaign.detailsBody %}pb-0{% endif %}">{{ campaign.homepageContent|raw }}</div>
  271.                 {% if campaign.detailsBody %}
  272.                     <a href="{{ path('campaign_details', campaignParams) }}" class="btn btn-primary btn-sm col-2 text-nowrap ml-0 mb-4">
  273.                         <strong>Learn More</strong>
  274.                     </a>
  275.                 {% endif %}
  276.             </div>
  277.         </div>
  278.     {% endif %}
  280.     {% if campaign.feeType == 'user' %}
  281.         <div class="panel">
  282.             <div class="panel-body mb-2">
  283.                 <small><i>A {{ campaign.fees }}% fee will be added at checkout to help cover costs of this fundraiser.</i></small>
  284.             </div>
  285.         </div>
  286.     {% endif %}
  288.     {% if featuredItems|length or shopItems|length or fundANeedItems|length %}
  289.         <div class="panel">
  290.             <div class="panel-body">
  291.                 <h4 class="mt-4 mb-0 pt-4 pb-3 featured-items-title">Featured Items</h4>
  293.                 <!-- Featured Auction Items -->
  294.                 {% if hasFeaturedItems %}
  295.                     <div class="campaign-featured">
  296.                         {% set componentVisible = true %}
  298.                         <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
  299.                             <h6>Auction</h6>
  300.                             <div class="d-flex align-items-center">
  301.                                 {% if is_logged_in() %}
  302.                                     {% set watchListItems = user_campaign_watchlist(app.user, campaign) %}
  303.                                     {% if watchListItems|length %}
  304.                                         <a href="{{ path('auction_watchlist', campaignParams) }}" class="catalog-link">
  305.                                             <strong>View Watchlist</strong>
  306.                                         </a>
  307.                                         {% if campaign.auctionAvailable %}
  308.                                             <span class="mx-2">|</span>
  309.                                         {% endif %}
  310.                                     {% endif %}
  311.                                 {% endif %}
  312.                                 {% if campaign.auctionAvailable %}
  313.                                     <a class="catalog-link" href="{{ path('auction_catalog', campaignParams) }}">
  314.                                         <strong>View Catalog</strong>
  315.                                     </a>
  316.                                 {% endif %}
  317.                             </div>
  318.                         </div>
  319.                         <ul class="auction-items row list-view">
  320.                             {% for data in featuredItems %}
  321.                                 {% set item = data[0] %}
  322.                                 {% set itemBidCount = data["bidCount"] %}
  323.                                 <li class="auction-item">
  324.                                     {% include '@BidcozFrontend/Auction/Item/_item_list.html.twig' %}
  325.                                 </li>
  326.                             {% endfor %}
  327.                         </ul>
  328.                     </div>
  329.                 {% endif %}
  331.                 <!-- Featured Shop Items -->
  332.                 {% if hasShopItems %}
  333.                     <div class="campaign-featured">
  334.                         <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
  335.                             <h6>Shop</h6>
  336.                             <a class="catalog-link" href="{{ path('shop_catalog', campaignParams) }}">
  337.                                 <strong>View {{ campaign.shopDisplayName }}</strong>
  338.                             </a>
  339.                         </div>
  340.                         <ul class="auction-items row list-view">
  341.                             {% for data in shopItems %}
  342.                                 {% set item = data[0] %}
  343.                                 <li class="auction-item">
  344.                                     {% include '@BidcozFrontend/Auction/Item/_item_list.html.twig' with { type: 'shop' } %}
  345.                                 </li>
  346.                             {% endfor %}
  347.                         </ul>
  348.                     </div>
  349.                 {% endif %}
  351.                 <!-- Featured Fund A Need Items -->
  352.                 {% if hasFundANeedItems %}
  353.                     <div class="campaign-featured">
  354.                         <div class="d-flex justify-content-between align-items-center mt-4 mb-2">
  355.                             <h6>Fund A Need</h6>
  356.                             <a class="catalog-link" href="{{ path('fund_a_need_catalog', campaignParams) }}">
  357.                                 <strong>View Fund A Need</strong>
  358.                             </a>
  359.                         </div>
  360.                         <ul class="auction-items row list-view">
  361.                             {% for data in fundANeedItems %}
  362.                                 {% set item = data[0] %}
  363.                                 <li class="auction-item">
  364.                                     {% include '@BidcozFrontend/Auction/Item/_item_list.html.twig' with { type: 'fund-a-need' } %}
  365.                                 </li>
  366.                             {% endfor %}
  367.                         </ul>
  368.                     </div>
  369.                 {% endif %}
  370.             </div>
  371.         </div>
  372.     {% endif %}
  374.     {% set winningTicketsByType = campaign_raffle_winners(campaign) %}
  375.     {% if hasRaffle and winningTicketsByType and campaign.raffleShowWinnersOnHomepage %}
  376.         <div class="raffle-winners panel">
  377.             <div class="panel-body pb-3">
  378.                 <h4 class="mt-4 mb-0 pt-4 pb-3 featured-items-title">{{ campaign.raffleDisplayName }} Winners</h4>
  380.                 {% for raffleName, tickets in winningTicketsByType %}
  381.                     <div class="row">
  382.                         {% for ticket in tickets %}
  383.                             <div class="col-12 col-md-6 col-xl-4">
  384.                                 <div class="panel">
  385.                                     <div class="panel-body">
  386.                                         <h6 class="my-3">
  387.                                             <a href="{{ path('campaign_raffle', campaignParams) }}">{{ raffleName }}</a>
  388.                                         </h6>
  389.                                         <div class="d-flex align-items-center mb-2">
  390.                                             {% set splitName = ticket.user.name|split(' ') %}
  391.                                             <div class="user-image flex-shrink-0 mr-2">
  392.                                                 {{ splitName[0]|slice(0, 1) }}{{ splitName[1]|slice(0, 1) }}
  393.                                             </div>
  394.                                             <div class="user-info flex-grow-1">
  395.                                                 <div class="name"><strong>{{ ticket.user.name }}</strong></div>
  396.                                                 {# <div class="email">{{ ticket.user.email }}</div> #}
  397.                                             </div>
  398.                                         </div>
  399.                                         <div class="ticket-number">
  400.                                             <strong>{{ campaign.ticketDisplayName }} #{{ ticket.number }}</strong>
  401.                                         </div>
  402.                                         <div class="won-item">
  403.                                             <strong>Won Item:</strong>
  404.                                             {{ ticket.itemsWon|map(i => i.item.description)|join(', ') }}
  405.                                         </div>
  406.                                         {% if ticket.itemsWon|length %}
  407.                                             <div class="won-item">
  408.                                                 <strong>Donor:</strong>
  409.                                                 {{ ticket.itemsWon|map(i => i.item.donor)|join(', ') }}
  410.                                             </div>
  411.                                         {% endif %}
  412.                                     </div>
  413.                                 </div>
  414.                             </div>
  415.                         {% endfor %}
  416.                     </div>
  417.                 {% endfor %}
  418.             </div>
  419.         </div>
  420.     {% endif %}
  422.     <div class="row">
  423.         {# TODO: THIS MAY BE NEEDED -- I WASN'T SURE #}
  424.         {# set rowClass= campaign.fundDriveEnabled and campaign.membershipEnabled ? 'col-md-6' : 'col-md-12'%}
  426.         {% if campaign.fundDriveEnabled and campaign.donationLevels|length and is_granted('FUND_DRIVE', organization) %}
  427.             <div class="donation {{ rowClass }}">
  428.                 <a class="btn btn-info btn-lg" href="{{ path('campaign_donate_levels',campaignParams) }}">Make a Pledge</a>
  429.                 {% if has_donor_donations(campaign) %}
  430.                     <br/><br/>
  431.                     <div class="row">
  432.                     {% for level in campaign.donationLevels %}
  433.                         {% if level.displayDonors %}
  434.                             <div class="col-md-4 col-xs-6">
  435.                                 <h4>{{ level.name }}</h4>
  436.                                 <ul style="list-style-type: none; padding-left: 0px;">
  437.                                     {% for donation in level.donations  %}
  438.                                         {% if not donation.isAnonymous and not donation.canceled %}
  439.                                             <li>{{ donation.donorName }}</li>
  440.                                         {% endif %}
  441.                                     {% endfor  %}
  442.                                 </ul>
  443.                             </div>
  444.                         {% endif %}
  445.                     {% endfor  %}
  446.                     </div>
  447.                 {% endif %}
  448.             </div>
  449.         {% endif %}
  451.         {% if has_members(campaign) %}
  452.             <br/><br/>
  453.             <div class="row">
  454.                 {% for level in campaign.membershipLevels  %}
  455.                     {% if level.displayDonors %}
  456.                         <div class="col-md-4 col-xs-6">
  457.                             <h4>{{ level.name }}</h4>
  458.                             <ul style="list-style-type: none; padding-left: 0px;">
  459.                                 {% for donation in level.donations  %}
  460.                                     {% if not donation.isAnonymous and not donation.canceled %}
  461.                                         <li>{{ donation.donorName }}</li>
  462.                                     {% endif %}
  463.                                 {% endfor  %}
  464.                             </ul>
  465.                         </div>
  466.                     {% endif %}
  467.                 {% endfor  %}
  468.             </div>
  469.         {% endif #}
  470.     </div>
  471. {% endblock %}
  473. {% block sidebar %}
  474.     <div class="campaign-details">
  475.         <div class="row">
  476.             <!-- Appeal Component -->
  477.             {% if hasFundDrive %}
  478.                 {% if campaign.cashDonationGoal != 0 %}
  479.                     {% set total_donations = campaign_total_fund_drive_donations(campaign, true) %}
  480.                     {% set progress_percent = (total_donations / campaign.cashDonationGoal) * 100 %}
  481.                 {% endif %}
  482.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  483.                     <div class="panel">
  484.                         <div class="panel-body">
  485.                             <div class="activity my-3">
  486.                                 <h6 class="my-3">Appeal</h6>
  487.                                 {% if campaign.displayCashDonationGoalProgress and total_donations is defined and progress_percent is defined %}
  488.                                     <div class="donations-total">{{ total_donations|money }}</div>
  489.                                     <div class="donations-goal">Raised of {{ campaign.cashDonationGoal|money }} goal</div>
  490.                                     <div class="progress-bar">
  491.                                         <div class="progress" style="width: {{ progress_percent }}%;"></div>
  492.                                     </div>
  493.                                 {% endif %}
  494.                                 <a href="{{ path('campaign_donate_levels', campaignParams) }}" class="btn btn-sm full-width">Give Now</a>
  495.                             </div>
  496.                         </div>
  497.                     </div>
  498.                 </div>
  499.             {% endif %}
  501.             <!-- Auction Component -->
  502.             {% if hasAuction and campaign.auctionAvailable %}
  503.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  504.                     <div class="panel">
  505.                         <div class="panel-body">
  506.                             <div class="activity my-3">
  507.                                 <h6 class="my-3">Auction</h6>
  508.                                 {% if is_logged_in() %}
  509.                                     {% set bidNumber = user_campaign_bid_number(app.user, campaign) %}
  510.                                     {% if bidNumber and campaign.auctionAvailable %}
  511.                                         <p class="sidebar-bidder-number">
  512.                                             You are bidder <strong style="font-size: 1rem;">#{{ bidNumber.number }}</strong>.
  513.                                         </p>
  514.                                     {% endif %}
  515.                                 {% endif %}
  517.                                 {% if campaign.auctionAvailable and (campaign.auction.hasOnsite or campaign.auction.hasOnline) %}
  518.                                     {% set auction = campaign.auction %}
  519.                                     {% set hasOnSiteAuction = auction.hasOnsite and auction.onsiteBegin and auction.onsiteEnd and is_granted('AUCTION_ONSITE', organization) %}
  520.                                     {% set hasOnlineAuction = auction.hasOnline and auction.onlineBegin and auction.onlineEnd and is_granted('AUCTION_ONLINE', organization) %}
  522.                                     {% if hasOnSiteAuction %}
  523.                                         <div class="mb-3">
  524.                                             {% if auction.location %}
  525.                                                 <p class="location">
  526.                                                     <strong>Event Location:</strong><br />
  527.                                                     {% if auction.locationLink %}
  528.                                                         <a href="https://maps.google.com/maps?q={{ auction.location }}" target="_blank">
  529.                                                             {{ auction.location }}
  530.                                                         </a>
  531.                                                     {% else %}
  532.                                                         {{ auction.location }}
  533.                                                     {% endif %}
  534.                                                 </p>
  535.                                             {% endif %}
  536.                                             <p class="auction-date">
  537.                                                 <strong>Start Date:</strong><br />
  538.                                                 {{ auction.onsiteBegin|date_long(campaign) }}
  539.                                             </p>
  540.                                             <p class="auction-date">
  541.                                                 <strong>End Date:</strong><br />
  542.                                                 {{ auction.onsiteEnd|date_long(campaign) }}
  543.                                             </p>
  544.                                         </div>
  545.                                     {% endif %}
  547.                                     {% if hasOnlineAuction %}
  548.                                         <div class="mb-4">
  549.                                             {# If the auction hasn't started yet, count down to start. #}
  550.                                             {% if "now"|date('c') < auction.onlineBegin|date('c') %}
  551.                                                 <p class="auction-date">
  552.                                                     <strong>Online Auction Begins:</strong><br/>
  553.                                                     {{ auction.onlineBegin|date_long(campaign) }}
  554.                                                 </p>
  555.                                                 <div
  556.                                                     class="countdown"
  557.                                                     data-end="{{ auction.onlineBegin|date('c') }}"
  558.                                                     data-timezone="{{ user_timezone() }}"
  559.                                                 ></div>
  560.                                             {# Else, the auction has started, so count down to end. #}
  561.                                             {% else %}
  562.                                                 <p class="auction-date">
  563.                                                     <strong>Online Auction Ends:</strong><br/>
  564.                                                     {{ auction.onlineEnd|date_long(campaign) }}
  565.                                                 </p>
  566.                                                 <div
  567.                                                     class="countdown"
  568.                                                     data-end="{{ auction.onlineEnd|date('c') }}"
  569.                                                     data-timezone="{{ user_timezone() }}"
  570.                                                 ></div>
  571.                                             {% endif %}
  572.                                         </div>
  573.                                     {% endif %}
  574.                                 {% endif %}
  575.                                 <a id="view-auction" class="btn btn-sm full-width my-1" href="{{ path('auction_catalog', campaignParams) }}">Bid Now</a>
  576.                             </div>
  577.                         </div>
  578.                     </div>
  579.                 </div>
  580.             {% endif %}
  582.             <!-- CrewUps Component -->
  583.             {% if hasVolunteer %}
  584.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  585.                     <div class="panel">
  586.                         <div class="panel-body">
  587.                             <div class="activity my-3">
  588.                                 <h6>{{ campaign.crewUpSetupDisplayName }}</h6>
  589.                                 {% if campaign.crewUpSetupTextDescription is not null %}
  590.                                     <p>{{ campaign.crewUpSetupTextDescription }}</p>
  591.                                 {% endif %}
  592.                                 <a href="{{ path('campaign_volunteer', campaignParams) }}" class="btn secondary btn-sm">
  593.                                     Crew Up
  594.                                 </a>
  595.                             </div>
  596.                         </div>
  597.                     </div>
  598.                 </div>
  599.             {% endif %}
  601.             <!-- Donations Component -->
  602.             {% if hasDonation %}
  603.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  604.                     <div class="panel">
  605.                         <div class="panel-body">
  606.                             <div class="activity my-3">
  607.                                 <h6>Donations</h6>
  608.                                 <p>Are you unable to participate or would you like to give more?</p>
  609.                                 {% if hasCashDonations and hasItemDonations %}
  610.                                     <a class="btn btn-sm secondary full-width" href="{{ path('campaign_donate', campaignParams) }}">Donate</a>
  611.                                 {% elseif hasItemDonations %}
  612.                                     <a class="btn btn-sm secondary full-width" href="{{ path('campaign_donate_item', campaignParams) }}">Donate</a>
  613.                                 {% elseif hasCashDonations %}
  614.                                     <a class="btn btn-sm secondary full-width" href="{{ path('campaign_donate_cash', campaignParams) }}">Donate</a>
  615.                                 {% endif %}
  616.                             </div>
  617.                         </div>
  618.                     </div>
  619.                 </div>
  620.             {% endif %}
  622.             <!-- Fund a Need Component-->
  623.             {% if hasFundANeed %}
  624.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  625.                     <div class="panel">
  626.                         <div class="panel-body">
  627.                             <div class="activity my-3">
  628.                                 <h6>{{ campaign.fundANeedDisplayName }}</h6>
  629.                                 <p>View specific needs and choose what you’d like to support.</p>
  630.                                 <a class="btn btn-sm secondary full-width" href="{{ path('fund_a_need_catalog', campaignParams) }}">{{ campaign.fundANeedDisplayName }}</a>
  631.                             </div>
  632.                         </div>
  633.                     </div>
  634.                 </div>
  635.             {% endif %}
  637.             <!-- Memberships Component -->
  638.             {% if hasMemberships %}
  639.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  640.                     <div class="panel">
  641.                         <div class="panel-body">
  642.                             <div class="activity my-3">
  643.                                 <h6>Memberships</h6>
  644.                                 <p>Show your ongoing support and become a valued member of the {{ organization.name }} team.</p>
  645.                                 <a class="btn btn-sm secondary full-width" href="{{ path('campaign_membership_levels', campaignParams) }}">Become a Member</a>
  646.                             </div>
  647.                         </div>
  648.                     </div>
  649.                 </div>
  650.             {% endif %}
  652.             <!-- Paddle Raise Component -->
  653.             {% if hasPaddleRaise %}
  654.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  655.                     <div class="panel">
  656.                         <div class="panel-body">
  657.                             <div class="activity my-3">
  658.                                 <h6>Paddle Raise</h6>
  659.                                 <p>When the time comes, raise it high!</p>
  660.                                 <a class="btn btn-sm secondary full-width" href="{{ path('campaign_paddle_raise', campaignParams) }}">Raise Your Paddle</a>
  661.                             </div>
  662.                         </div>
  663.                     </div>
  664.                 </div>
  665.             {% endif %}
  667.             <!-- Raffles Component -->
  668.             {% if hasRaffle %}
  669.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  670.                     <div class="panel">
  671.                         <div class="panel-body">
  672.                             <div class="activity my-3">
  673.                                 <h6>{{ campaign.raffleDisplayName }}</h6>
  674.                                 <p>Get your chance to win and support {{ organization.name }} today!</p>
  675.                                 <a href="{{ path('campaign_raffle', campaignParams) }}" class="btn secondary full-width btn-sm">
  676.                                     Buy {{ campaign.raffleDisplayName }} Tickets
  677.                                 </a>
  678.                             </div>
  679.                         </div>
  680.                     </div>
  681.                 </div>
  682.             {% endif %}
  684.             <!-- Registrations Component -->
  685.             {% if hasRegistrations %}
  686.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  687.                     <div class="panel">
  688.                         <div class="panel-body">
  689.                             <div class="activity my-3">
  690.                                 <h6>Registrations</h6>
  691.                                 <p><strong>Available Now!</strong><br />Register to participate in our event.</p>
  692.                                 <a class="btn btn-sm full-width" href="{{ path('campaign_registrations', campaignParams) }}">Register</a>
  693.                             </div>
  694.                         </div>
  695.                     </div>
  696.                 </div>
  697.             {% endif %}
  699.             <!-- Shop Component -->
  700.             {% if hasShop %}
  701.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  702.                     <div class="panel">
  703.                         <div class="panel-body">
  704.                             <div class="activity my-3">
  705.                                 <h6>{{ campaign.shopDisplayName }}</h6>
  706.                                 <p>Checkout our catalog of great items available for purchase.</p>
  707.                                 <a href="{{ path('shop_catalog', campaignParams) }}" class="btn btn-sm secondary full-width">{{ campaign.shopDisplayName }}</a>
  708.                             </div>
  709.                         </div>
  710.                     </div>
  711.                 </div>
  712.             {% endif %}
  714.             <!-- Sponsorships Component -->
  715.             {% if hasSponsorships %}
  716.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  717.                     <div class="panel">
  718.                         <div class="panel-body">
  719.                             <div class="activity my-3">
  720.                                 <h6>Sponsorship Opportunities</h6>
  721.                                 <p>Purchase a spot and display your brand logo proudly.</p>
  722.                                 <a href="{{ path('campaign_sponsor', campaignParams) }}" class="btn btn-sm secondary full-width">Become a Sponsor</a>
  723.                             </div>
  724.                         </div>
  725.                     </div>
  726.                 </div>
  727.             {% endif %}
  729.             <!-- Tickets Component -->
  730.             {% if hasTickets and organization.slug != 'chg' %}
  731.                 <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12">
  732.                     <div class="panel">
  733.                         <div class="panel-body">
  734.                             <div class="activity my-3">
  735.                                 <h6 class="my-3">{{ campaign.ticketDisplayName }}</h6>
  737.                                 <p>
  738.                                     {% if tickets_available(campaign) %}
  739.                                         <strong>Available Now!</strong>
  740.                                     {% else %}
  741.                                         <strong>SOLD OUT!</strong>
  742.                                     {% endif %}
  744.                                     {% if is_logged_in() %}
  745.                                         {% set reservedSeats = user_campaign_reserved_seats(app.user, campaign) %}
  746.                                         {% if reservedSeats|length and is_granted('TICKET_SEATS_ASSIGN', organization) %}
  747.                                             {% set plural = reservedSeats|length == 1 ? 'Seat' : 'Seats' %}
  748.                                             <br />
  749.                                             <span class="sidebar-reserved-seat{% if reservedSeats|length %} multiple{% endif %}">
  750.                                                 Your {{ plural|capitalize }}
  751.                                                 <strong style="font-size: 1rem;" class="donations-total">{{ reservedSeats|join(', ') }}</strong>.
  752.                                             </span>
  753.                                         {% endif %}
  754.                                     {% endif %}
  755.                                 </p>
  757.                                 {% if tickets_available(campaign) %}
  758.                                     <a class="btn btn-sm full-width" href="{{ path('campaign_tickets', campaignParams) }}">Buy {{ campaign.ticketDisplayName }}s</a>
  759.                                 {% endif %}
  760.                             </div>
  761.                         </div>
  762.                     </div>
  763.                 </div>
  764.             {% endif %}
  766.             {#
  767.             <p style="margin-top: 20px;">
  768.                 <small><b>Server Time:</b> <span id="server-time" data-server-time="{{ now|date('r', 'America/Chicago') }}">{{ now|date('h:i a T') }}</span></small>
  769.             </p>
  771.             {% if is_logged_in() and campaign.hasAuction() %}
  772.                 <a href="{{ path('notification_preference', campaignParams) }}" class="btn btn-primary email-text-button">Email or Text?</a>
  773.             {% endif %}
  774.             #}
  775.         </div>
  776.     </div>
  778.     <script type="text/javascript"> var isCampaign = true; </script>
  779.     {% if campaign.video.url is not null %}
  780.         <script type="text/javascript">
  781.             var tag = document.createElement('script'),
  782.                 player,
  783.                 done = false,
  784.                 videoId = document.getElementsByClassName('video')[0].id,
  785.                 overlay = document.getElementsByClassName('banner-overlay-content'),
  786.                 campaignImage = document.getElementsByClassName('campaign-image');
  788.             tag.src = "https://www.youtube.com/iframe_api";
  790.             var firstScriptTag = document.getElementsByTagName('script')[0];
  791.             firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  793.             if (videoId.includes("watch?v=")) { //if the url is pasted from the browser url
  794.                 videoId = videoId.split('?v=')[1];
  796.             } else if (videoId.includes("youtu.be/")) { // if the url is copied from the 'share' button on youtube
  797.                 videoId = videoId.split('/')[3];
  799.             }
  801.             function onYouTubeIframeAPIReady() {
  802.                 player = new YT.Player('player', {
  803.                     height: '100%',
  804.                     width: '100%',
  805.                     videoId: videoId,
  806.                     playerVars: { 'controls': 0 },
  807.                     events: {
  808.                         'onReady': onPlayerReady,
  809.                         'onStateChange': onPlayerStateChange
  810.                     }
  811.                 });
  812.             };
  814.             function onPlayerReady(event) {
  815.                 document.getElementById('play').disabled = false;
  816.             };
  818.             function onPlayerStateChange(event) {
  819.                 if (event.data == YT.PlayerState.ENDED) {
  820.                   videoStopped();
  821.                 }
  822.             };
  824.             function stopVideo() {
  825.                 player.stopVideo();
  826.             };
  828.             function playVideo() {
  829.                 player.playVideo();
  830.             };
  832.             function pauseVideo() {
  833.                 player.pauseVideo();
  834.             };
  836.             function rewindVideo() {
  837.                 player.seekTo({seconds:1, allowSeekAhead:false});
  838.             };
  840.             function videoStopped() {
  841.                 document.getElementById('youtube-container').style.display = "none";
  842.                 document.getElementById('video-cover').style.display = "";
  843.                 document.getElementById('play').style.display = "";
  845.                 if (campaignImage.length) {
  846.                     campaignImage[0].style.zIndex = "2";
  847.                 }
  849.                 if (overlay.length) {
  850.                     overlay[0].style.display = "";
  851.                 }
  852.                 document.getElementById('controls').setAttribute('style', 'display: none !important');
  853.             };
  855.             document.getElementById('play').addEventListener('click', function(e) {
  856.                 e.preventDefault();
  857.                 var bannerHeight = $('#video-cover').height();
  858.                 document.getElementById('youtube-container').style.display = "";
  859.                 document.getElementById('youtube-container').style.height = bannerHeight + 'px';
  860.                 document.getElementById('video-cover').style.display = "none";
  861.                 document.getElementById('play').style.display = "none";
  863.                 if (campaignImage.length) {
  864.                     campaignImage[0].style.zIndex = "0";
  865.                 }
  867.                 if (overlay.length) {
  868.                     overlay[0].style.display = "none";
  869.                 }
  870.                 document.getElementById('controls').style.display = "";
  871.                 player.playVideo();
  872.             });
  874.             document.getElementById('pause').addEventListener('click', function(e) {
  875.                 e.preventDefault();
  876.                 pauseVideo();
  877.                 videoStopped();
  878.             });
  880.             document.getElementById('rewind').addEventListener('click', function(e) {
  881.                 e.preventDefault();
  882.                 rewindVideo();
  883.             });
  884.         </script>
  885.     {% endif %}
  886. {% endblock %}