{%- if css_rules or css -%}

<style>
{%- for css_rule in css_rules -%}
	{{ css_rule }}
{%- endfor -%}
{{ css or "" }}
</style>
{%- endif -%}

{%- macro render_element(element) -%}
	{%- if element.element_type in ('Content', 'Web View') -%}
		<div class="web-content {{ element_class(element) }}" {{ element_style(element) }}>
		{{ element.web_content_html }}
		</div>
	{%- elif element.element_type=='Image' -%}
		<img src='{{ element.image_url }}'
			{%- if element.element_class -%}class='{{ element.element_class }}'{%- endif -%}
			{{ element_style(element) }}>
	{%- endif -%}
{%- endmacro -%}

{%- macro element_class(element) -%}
	{{ element.element_class or "" }}
{%- endmacro -%}

{%- macro element_style(element) -%}
	{%- if element.element_style or element.background_color -%}
	style = "{{ element.element_style or '' }} {%if element.background_color %}background-color: {{ element.background_color }};{% endif %}"
	{%- endif -%}
{%- endmacro -%}

{%- macro render_sections(sections) -%}
{%- for section in sections -%}
<section class='section {{ section.element_class or "" }} {{ section.hide and "hidden" or "" }}' {{ element_style(section) }}>
	<div class='section-body {% if section.contain_section_width %}container{% endif %}'>
	{%- if section.section_intro -%}
		<div class='section-intro'>{{ section.section_intro }}</div>
	{%- endif -%}

	{%- if section.section_type == 'List' -%}
		{%- for element in section.elements -%}
			{{ render_element(element) }}
		{%- endfor -%}

	{%- elif section.section_type == 'Grid' -%}
		<div class='row'>
		{%- for element in section.elements -%}
			<div class='col-md-{{ element.columns or 6 }}'>
			{{ render_element(element) }}
			</div>
		{%- endfor -%}
		</div>

	{%- elif section.section_type == 'Tabbed' -%}
		<ul class="nav" role="tablist">
			{%- for element in section.elements -%}
			<li class="nav-item">
				<a class="nav-link {{ loop.index == 1 and 'active' or ''}}" href="#{{ element.element_id }}" role="tab" data-toggle="tab">
					{{ element.title }}
				</a>
			</li>
			{%- endfor -%}
		</ul>
		<div class="tab-content">
			{%- for element in section.elements -%}
			<div class="tab-pane {{ loop.index == 1 and 'show active' or ''}}" role="tabpanel" id="{{ element.element_id }}">
				{{ render_element(element) }}
			</div>
			{%- endfor -%}
		</div>

	{%- endif -%}
	</div>
</section>
{%- endfor -%}
{%- endmacro -%}

{% if content_type == 'HTML' -%}
{{ content_html }}
{%- else -%}
{{ render_sections(sections) }}
{%- endif -%}