{% macro devent_card(title, link, body, image, image_alt, footer) %}
<a href="{{ link }}" class="no-border">
	<div class="mb-4 card-body row text-body">
		<div class="col-xs-12 col-sm-5 mb-4 mb-md-0">
			<img class="px-3" src='{{ image }}' alt='{{ image_alt }}'>
		</div>
		<div class="col-xs-12 col-sm-7">
			<h4>{{ title }}</h4>
			<p>{{ body }}</p>
			<p class="small font-weight-bold text-uppercase">{{ footer }}</p>
		</div>
	</div>
</a>
{% endmacro %}

{% macro speaker_card(name, image, subtitle, link) %}
<div class="col-sm-4 col-md-3 px-2">
	<div class="card mb-4 text-body">
		<a href='{{ link }}' target='_blank' style="text-decoration: none !important;">
			<img class="card-img-top greyscale" src="{{ image }}" alt="{{ name }}">
			<div class="card-body">
				<h5>{{ name }}</h5>
				<div class='text-muted'>{{ subtitle }}</div>
			</div>
		</a>
	</div>
</div>
{% endmacro %}

{% macro event_card(title, link, body, image, image_alt, footer) %}
<a href="{{ link }}" class="card mb-5 no-border">
	<div class="row">
		<div class="col-xs-12 col-sm-5 mb-4 mb-md-0">
			<div class="h-100" style='background: url("{{ image }}"); background-size: cover; background-position: center center; min-height: 10rem;'></div>
		</div>
		<div class="col-xs-12 col-sm-7">
			<div class="card-body pl-4 pl-md-0 pt-0 pt-md-4 py-md-4">
				<h4>{{ title }}</h4>
				<p>{{ body }}</p>
				<p class="small mt-3 mb-0 font-weight-bold text-uppercase">{{ footer }}</p>
			</div>
		</div>
	</div>
</a>
{% endmacro %}

{% macro lead_max(txt, bg) %}
<section class="section-padding text-center section-light {{ 'section-bg' if bg }}">
	<div class='container'>
	<p class="lead-max">
		{{ txt }}
	</p>
</section>
{% endmacro %}

{% macro hero(title, pre_title, subtitle, bg_image, cta_html, footer_message='') %}
<section class='section text-center'>
	<div class='container'>
	<!-- <img src='/assets/foundation/img/icons/microprocessor.svg' style='height: 100px; margin-bottom: 2rem; margin-top: -1rem'> -->
		<div>
			<span class='lead'>
				{{ pre_title }}
			</span>
			<h1 class='mt-2'>{{ title }}</h1>
			<div class='lead my-3'>
				{{ subtitle }}
			</div>
			<div class='my-3'>
				{{ cta_html }}
			</div>
			<div class='my-3 small text-muted'>
				{{ footer_message }}
			</div>
		</div>
	</div>
</section>
{% endmacro %}

{% macro events(title, events) %}
<section class="section-padding section-bg">
	<div class='container'>
		<div class='text-center'>
			<h2>{{ title }}</h2>
			<p class='lead'>Connect with the core team, maintainers, developers, implementors. This is an event you cannot miss.</p>
		</div>
		<div class="mt-6 container-md mx-auto">
			{% if 'sprint' in events %}
				{{ event_card(
					'Contribution Sprint',
					'/conf/2019/sprint',
					'Join the global ERPNext community for a
					two day sprint and contribute new features,
					fixes and documentation.',
					'/assets/foundation/img/conf/2019/sprint.png',
					'Sprint',
					'15 and 16 October <br> Mysore Association Auditorium, Matunga'
				) }}
			{% endif %}

			{% if 'talks' in events %}
				{{ event_card(
					'Talks and Sessions',
					'/conf/2019/talks',
					'Interact about the product road-map, learn about the new and
					exciting features, stories and best practices.',
					'/assets/foundation/img/conf/2019/talks.png',
					'Talks and Sessions',
					'17 and 18 October <br> Mysore Association Auditorium, Matunga'
				) }}
			{% endif %}

			{% if 'expo' in events %}
				{{ event_card(
					'Exhibition',
					'/conf/2019/exhibition',
					'Showcase the services you provide for ERPNext to the global community,
					understand their challenges and explore solutions with them.',
					'/assets/foundation/img/conf/2019/expo.png',
					'Exhibition',
					'17 and 18 October <br> Mysore Association Auditorium, Matunga'
				) }}
			{% endif %}

			{% if events|len < 3 %}
			<p class='text-center'>
				<a href='/conf/2019' class='text-muted'>Conference Home</a>
			</p>
			{% endif %}
		</div>
	</div>
</section>
{% endmacro %}

{% macro footer(title, subtitle, cta_html) %}
<section class="section-padding text-center section-dark">
	<div class='container'>
	<h2></h2>
	<p class="lead m-auto">{{ subtitle }}</p>
	<p>
		{{ cta_html }}
	</p>
	</div>
</section>
{% endmacro %}