{% block element_bc_showcase_banner %}
	{%  set config = element.fieldConfig.elements %}

	{% set backgroundMedia = null %}
	{% if config['backgroundMedia'].value %}
		{% set mediaCollection = searchMedia([config['backgroundMedia'].value], context.context) %}
		{% set backgroundMedia = mediaCollection.get(config['backgroundMedia'].value).url %}
	{% endif %}

	{% set backgroundColor = element.config.backgroundColor.value %}
	{% set media = element.config.media.value %}
	{% set title = element.config.title.value %}
	{% set btnBgColor = element.config.btnBgColor.value %}
	{% set buttonLink = element.config.buttonLink.value %}
	{% set buttonText = element.config.buttonText.value %}
	{% set titleColor = element.config.titleColor.value %}
	{% set btnTxtColor = element.config.btnTxtColor.value %}
	{% set description = element.config.description.value %}
	{% set descriptionColor = element.config.descriptionColor.value %}

	{% set bannerStyle = "width:100%; padding: 4% 3%;" %}
	{% if backgroundMedia %}
		{% set bannerStyle = bannerStyle ~ " background-image: url('" ~ backgroundMedia ~ "'); background-repeat: no-repeat; background-size: cover; background-position: center;" %}
	{% elseif backgroundColor %}
		{% set bannerStyle = bannerStyle ~ " background-color: " ~ backgroundColor ~ ";" %}
	{% endif %}

	<div class="cms-element-{{ element.type }}">

		<div style="{{ bannerStyle }}" class="showcase--banner-wrapper">
			<div class="container">
				<div class="banner--wrapper">

					<div class="banner--detail">
						<h1 style="color:{{titleColor}};">
							{% if config['title'].value %}
								{{config['title'].value}}
							{% else %}
								Designer's interior for your home.
							{% endif %}
						</h1>
						<p style="color:{{descriptionColor}};">
							{% if config['description'].value %}
								{{config['description'].value}}
							{% else %}
								Lorem Ipsum is simply dummy text of the printing and typesetting industry.
							{% endif %}
						</p>
						<div class="action--btn">
							<a href="{% if config['buttonLink'].value %} {{config['buttonLink'].value~'/'}} {% else %}#{% endif %}" style="background:{{btnBgColor}}; color:{{btnTxtColor}};">
								{% if config['buttonText'].value %}
									{{config['buttonText'].value}}
								{% else %}
									View Details
								{% endif %}
							</a>
						</div>
					</div>
					<div class="banner--image">
						{% set mediaEntity = null %}
						{% if config['media'].value %}
							{% set mediaCollection = searchMedia([config['media'].value], context.context) %}
							{% set mediaEntity = mediaCollection.get(config['media'].value) %}
						{% endif %}

						{% if mediaEntity %}
							{% set attributes = {
								'height': '575',
								'width' : '489',
								'alt': (mediaEntity.translated.alt ?: title),
								'title': (mediaEntity.translated.title ?: title)
							} %}
							{% sw_thumbnails 'product-manufacturer-image-thumbnails' with {
								media: mediaEntity
							} %}
						{% endif %}
					</div>
				</div>
			</div>
		</div>

	</div>
{% endblock %}
