/* alt tag added for signposts image per accessibility audit finding, 2020 - HDR. */
<infinite-scroll-content>

	<a if={ articles && articles.length > 0 } class="custom-cardset col-lg-4 col-md-4 col-sm-12 card_Long cardBg_1 wow fadeInUp" style="background-image:url('{ articles[0].get_image }');" href="/s/c/{ articles[0].slug }">
		<div class="col-sm-7 inner-description">
			<h4>{ articles[0].kind }</h4>
	    <h2>{ articles[0].title }</h2>
	    <!--  <p>{ articles[0].get_submitter }</p>  -->
	  </div>
	</a>

	<a if={ articles && articles.length > 1 } class="custom-cardset col-lg-4 col-md-4 col-sm-12 cardBg_2 wow fadeInUp" style="background-image:url('{ articles[1].get_image }');" href="/s/c/{ articles[1].slug }">
	  <div class="col-sm-7 inner-description">
			<h4>{ articles[1].kind }</h4>
	    <h2> { articles[1].title } </h2>
	    <!--  <p>{ articles[1].get_submitter }</p>  -->
	  </div>
	</a>

    <div if={ (tag_title == "Exploring your Options" || tag_title == "Early Stage" || tag_title == "Growing Your Business" || tag_title == "Sales and Marketing") && current_language==="en" } class="custom-cardset col-lg-4 col-md-4 col-sm-12 gradient_blueLight wow fadeInUp">
        <div class="Content_Fixed events-box">
            <span> </span>
            <a href="/s/pathways/second/" if={ tag_title == "Exploring your Options" }>
                <h2>Exploring you Options</h2>
                <p>Are you thinking about
                    starting your own business?
                    Self-employment can be a
                    rewarding experience, but
                    there are important things to
                    consider before you go solo.
                </p>
                <br><br>
            </a>

            <a href="/s/pathways/first/" if={ tag_title == "Early Stage" }>
                <h2>Establishing your Venture</h2>
                <p>Ready to set up your
                    business? Learn how to
                    navigate the legal system for
                    your province and establish
                    your venture!
                </p>
                <br><br>
            </a>

            <a href="/s/pathways/third/" if={ tag_title == "Growing Your Business" || tag_title == "Sales and Marketing"}>
                <h2>Promoting your Business</h2>
                <p>Planning communications for
                    your new or existing business?
                    Give your business a unique
                    voice that communicates your
                    value and helps you stand out.
                </p>
                <br><br>
            </a>
        </div>
    </div>
    <div if={ (tag_title == "Exploring your Options" || tag_title == "Early Stage" || tag_title == "Growing Your Business" || tag_title == "Sales and Marketing") && current_language==="fr" } class="custom-cardset col-lg-4 col-md-4 col-sm-12 gradient_blueLight wow fadeInUp">
        <div class="Content_Fixed events-box">
            <span> </span>
            <a href="/s/pathways/second/" if={ tag_title == "Exploring your Options" }>
                <h2>Explorer vos options</h2>
                <p>Pensez-vous à
                    démarrer votre propre entreprise?
                    Le travail indépendant peut être une
                    expérience enrichissante, mais
                    il y a des choses importantes à
                    considérer avant de démarrer en solo.
                </p>
                <br><br>
            </a>

            <a href="/s/pathways/first/" if={ tag_title == "Early Stage" }>
                <h2>Créer votre entreprise</h2>
                <p>Prêt à mettre en place votre
                  Entreprise ? Apprendre à
                  naviguer dans le système juridique pour
                  votre province et établir
                  votre entreprise!

                </p>
                <br><br>
            </a>

            <a href="/s/pathways/third/" if={ tag_title == "Growing Your Business" || tag_title == "Sales and Marketing"}>
                <h2>Promouvoir votre entreprise</h2>
                <p>Planifier les communications pour
                    votre nouvelle entreprise ou existante?
                    Donnez à votre entreprise une voix unique
                    qui communique vos
                    valeurs et vous aide à vous démarquer.
                </p>
                <br><br>
            </a>
        </div>
    </div>
    <div if={ event && default } class="custom-cardset col-lg-4 col-md-4 col-sm-12 gradient_pink wow fadeInUp">
        <div class="Content_Fixed events-box">
            <span> </span>
            <h2 if={current_language === "en"}>Events coming up</h2>
            <h2 if={current_language === "fr"}>Événements à venir</h2>
            <div if={ event[0] }>
                <a href="/s/e/{ event[0].slug }">
                    <h4>{event[0].title}</h4>
                </a>
                <p>{pretty_date(event[0].when)}</p>

                <a href="/s/e/{ event[1].slug }">
                    <h4>{event[1].title}</h4>
                </a>
                <p>{pretty_date(event[1].when)}</p>
            </div>

            <a href="/s/e/">
                <p style="margin-top: 20px;color: #e5e5e5;" if={current_language === "en"}>Click here to see more events.</p>
                <p style="margin-top: 20px;color: #e5e5e5;" if={current_language === "fr"}>Cliquez ici pour voir plus d’opportunités de financement.</p>
            </a>
        </div>
    </div>
    
    <a if={ default && current_language === "en"} class="custom-cardset card_Wide gradient_blue wow fadeInUp" href="/s/pathways/">
        <div class="Content_Fixed_IconWith">
            <span> PATHWAYS </span>
            <h2> Where do you go from here? </h2>
            <p> Plan your next step with our simple, straightforward guides to business in Canada. </p>
        </div>
        <div class="IconRight">
            <img src="/static/images/signposts.svg" alt="">
        </div>
    </a>
    
    <a if={ default && current_language === "fr"} class="custom-cardset card_Wide gradient_blue wow fadeInUp" href="/s/pathways/">
        <div class="Content_Fixed_IconWith">
            <span> Les chemins d'accès </span>
            <h2> Où allez-vous à partir d'ici? </h2>
            <p> Planifiez votre prochaine étape avec nos guides simplifiés sur les affaires au Canada. </p>
        </div>
        <div class="IconRight">
            <img src="/static/images/signposts.svg" alt="">
        </div>
    </a>

    <div if={ funding && default } class="custom-cardset col-lg-4 col-md-4 col-sm-12 gradient_pink wow fadeInUp">
        <div class="Content_Fixed events-box">
            <span> </span>
            <h2 if={current_language === "en"}>Funding Opportunities</h2>
            <h2 if={current_language === "fr"}>Opportunités de financement</h2>
            <div if={ funding[0] }>
                <a href="/s/e/{ funding[0].slug }">
                    <h4>{funding[0].title}</h4>
                </a>
                <p>{pretty_date(funding[0].when)}</p>

                <a href="/s/e/{ funding[1].slug }">
                    <h4>{funding[1].title}</h4>
                </a>
                <p>{pretty_date(funding[1].when)}</p>
            </div>

            <a href="/s/e/">
                <p style="margin-top: 20px;color: #e5e5e5;" if={current_language === "en"}>Click here to see more Funding Opportunities.</p>
                <p style="margin-top: 20px;color: #e5e5e5;" if={current_language === "fr"}>Cliquez ici pour voir plus d’opportunités de financement.</p>
            </a>
        </div>
    </div>

	<a class="custom-cardset col-lg-4 col-md-4 col-sm-12 gradient_lightgreen wow fadeInUp" href="/s/r/check-organization/" if={ default }>
	  <div class="Content_Fixed" if={ current_language==="en" }>
	    <span>
	        JOIN US
	    </span>
	    <h2>
	      Do your products or services support women in business?
	    </h2>
	    <p>
	      Check to see if your organization is listed here.
	    </p>
	  </div>
      <div class="Content_Fixed" if={ current_language==="fr" }>
	    <span>
	        Rejoignez-nous
	    </span>
	    <h2>
	      Vos produits ou services soutiennent-ils les femmes dans les affaires?
	    </h2>
	    <p>
	      Vérifiez si votre organisation est répertoriée ici.
	    </p>
	  </div>
	</a>

	<span class="custom-cardset col-lg-4 col-md-4 col-sm-12 gradient_blueLight wow fadeInUp" if={ default }>
	  <div class="Content_Fixed" if={ current_language==="en" }>
	    <span>
	        NEWSLETTER
	    </span>
	    <h2>
	      Weekly updates.
	      Especially for you.
	    </h2>
	    <p>
	      Receive stories of womens' business struggles and success, advice and guides.
	    </p>
	    <input type="email" id="newsletter_id" placeholder= "Place email here"/>

	      <button class="SignUpBtn_Blank" onclick="encodeURIComponent(window.location='/users/newsletter/?email=' + document.getElementById('newsletter_id').value)">
	      	Sign Up
	      </button>
	  </div>
      <div class="Content_Fixed" if={ current_language==="fr" }>
	    <span>
	        Infolettre
	    </span>
	    <h2>
	      Mises à jour hebdomadaires.
	      Spécialement pour toi.
	    </h2>
	    <p>
	      Recevez des récits de luttes commerciales et de succès de femmes, des conseils et des guides.
	    </p>

	    <input type="email" id="newsletter_id" placeholder="Place email ici" />
	      <button class="SignUpBtn_Blank" onclick="encodeURIComponent(window.location='/users/newsletter/?email=' + document.getElementById('newsletter_id').value)">
	       inscrivez-vous
	      </button>
	  </div>
	</span>

	<a if={featured_contents && default} each={ featured_content in featured_contents } class="infinite-scroll-cards custom-cardset col-lg-4 col-md-4 col-sm-12 cardBg_4 wow fadeInUp" style="background-image:url('{ featured_content.get_image }');" href="/s/c/{ featured_content.slug }">
    <div class="col-sm-7 inner-description">
      <h2 if={current_language==="en"}>Featured Content</h2>
      <h2 if={current_language==="fr"}>Contenu en vedette</h2>
      <h4>{ featured_content.kind }</h4>
      <h2>{ featured_content.title }</h2>
    </div>
	</a>

	<a each={ article, index in articles } if={ index > 2} class="infinite-scroll-cards custom-cardset col-lg-4 col-md-4 col-sm-12 cardBg_4 wow fadeInUp" style="background-image:url('{ article.get_image }');" href="/s/c/{ article.slug }">
	  <div class="col-sm-7 inner-description">
		  <h4>{ article.kind }</h4>
	    <h2>
	        { article.title }
	    </h2>
	    <!--  <p>{ article.get_submitter }</p>  -->
	  </div>
	</a>

	var controller = this;
	controller.articles = [];
	controller.default = false;
    controller.current_language = opts.current_language;
	var _pending = false;


	//Fetch most recent event
	fetch(EVENTS_API_URL + '?latest=true')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
    	controller.update({
    		event: data.results
		});
    });

	//Fetch Featured content
	fetch(API_URL + '?featured=true')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
    	controller.update({
    		featured_contents: data.results
		  });
  });

  fetch(EVENTS_API_URL + '?kind=FUNDING&latest=true')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    controller.update({
      funding: data.results
    });
  });

	results_manager.on("update",function(data){
		controller.update({
			articles: results_manager.page > 1 ?
				controller.articles.concat(data.results) :
				data.results
		});
		_pending = false;
	});

	results_manager.on('search', function(filters){
		controller.update({
			default: !Object.keys(filters).length
		});

		var tags_parts=(window.location+'').split("tags=");
		if (tags_parts.length > 1) {
        	controller.tag_title = tags_parts[1].replace(/%20/gi, " ");
		}
	});

    controller.on('mount', function() {
	  window.addEventListener('scroll', controller.handleScroll);
	  window.addEventListener('resize', controller.handleScroll);
	  return controller.update();
	});

	controller.on('unmount', function() {
	  window.removeEventListener('scroll', controller.handleScroll);
	  return window.removeEventListener('resize', controller.handleScroll);
	});

	this.handleScroll = function(e) {
    if (controller.reachedEndOfElement() &! _pending && results_manager.has_next_page) {
			_pending=true;
			results_manager.trigger('next_page')
    }
	}

	this.reachedEndOfElement = function() {
		var cards = document.getElementsByClassName('infinite-scroll-cards')
		var last_element = cards[cards.length - 1];

		//If last_element is not defined, it means we have run out of articles
		if(!last_element){
			return false;
		} else {
			var pos = last_element.getBoundingClientRect();
			var winheight = window.innerHeight || document.documentElement.clientHeight;
			return (winheight - pos.bottom) >= 0;
		}
	};

</infinite-scroll-content>