{% extends "base.html" %}

{% load static site_settings %}

{% block title %}{{ block.super }} - Welcome!{% endblock %}

{% block styles %}
  {{ block.super }}
  <style id="header-styles">
    body {
		background: {{ site_globals.background_color }};
    }

	.hero-container {
		margin-top: -206px;
	}

	.hero-bg {
		background-color: {{ site_globals.secondary_color }};
		background-image: linear-gradient(345deg, {{ site_globals.primary_color }} 0%, {{ site_globals.secondary_color }} 100%); 
	}

	.hero {
		padding-top: 254px;
		z-index: 100;
	}

	.hero .hero-title {
		color: {{ site_globals.primary_text_color }};
	}

	.hero .lead {
		color: {{ site_globals.primary_text_color }};
	}

	.btn-sign-up {
		display: block;
		width: 150px;
	}
	
	.feature-card {
		background: none;
		border: none;
	}
	
	.feature-card .card-img-top {
		max-width: 250px;
	}

	.feature-card .card-title {
		color: {{ site_globals.secondary_text_color }};
	}

	.feature-card .card-text {
		color: {{ site_globals.secondary_text_color }};
	}
  </style>
{% endblock %}

{% block custom_styles %}
  {{ block.super }}
  {{ site_globals.home_page_css|load_custom_css|safe }}
{% endblock %}

{% block content %}
<div class="container-fluid hero-container hero-bg">
	<section class="hero clearfix px-5 pb-5 text-center text-white">
		<div class="row align-items-center">
			<div class="col-md-7 mx-auto">
				<h1 class="hero-title mb-3">{% if site_globals.hero_text %}{{ site_globals.hero_text }}{% else %}Welcome to Tethys Portal,
		the hub for your apps.{% endif %}</h2>
				<p class="lead mb-4">{% if site_globals.blurb_text %}{{ site_globals.blurb_text }}{% else %}Tethys Portal is designed to be customizable, so that you can host apps for your
		organization. You can change everything on this page from the Home Page settings.{% endif %}</h3>
				{% if not user.is_authenticated and ENABLE_OPEN_SIGNUP %}
					<a href="{% url 'accounts:register' %}" class="btn btn-outline-light btn-sign-up mx-auto mt-5 mb-3">Sign Up</a>
				{% endif %}
			</div>
		</div>
	</section>
</div>

<section class="features clearfix">
	<div class="container">
		<div class="row my-5">
			<div class="col-md">
				<div class="card feature-card feature-one text-center mb-3 mx-auto">
					<img src="{% static site_globals.feature_1_image|default:'tethys_portal/images/placeholder.gif' %}" class="card-img-top mx-auto" alt="">
					<div class="card-body">
						<h5 class="card-title">{{ site_globals.feature_1_heading|default:"Feature 1" }}</h5>
						<p class="card-text">{{ site_globals.feature_1_body|default:"Use these features to brag about all of the things users can do with your instance of Tethys Portal." }}</p>
					</div>
				</div>
			</div>
			<div class="col-md">
				<div class="card feature-card feature-two text-center mb-3 mx-auto">
					<img src="{% static site_globals.feature_2_image|default:'tethys_portal/images/placeholder.gif' %}" class="card-img-top mx-auto" alt="">
					<div class="card-body">
						<h5 class="card-title">{{ site_globals.feature_2_heading|default:"Feature 2" }}</h5>
						<p class="card-text">{{ site_globals.feature_2_body|default:"Describe the apps and tools that your Tethys Portal provides and add custom pictures to each feature as a finishing touch." }}</p>
					</div>
				</div>
			</div>
			<div class="col-md">
				<div class="card feature-card feature-three text-center mx-auto">
					<img src="{% static site_globals.feature_3_image|default:'tethys_portal/images/placeholder.gif' %}" class="card-img-top mx-auto" alt="">
					<div class="card-body">
						<h5 class="card-title">{{ site_globals.feature_3_heading|default:"Feature 3" }}</h5>
						<p class="card-text">{{ site_globals.feature_3_body|default:"You can change the color theme and branding of your Tethys Portal in a jiffy. Visit the Site Admin settings from the user menu and select General Settings." }}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<div id="home-page" style="display: none;"></div>
{% endblock %}