{% extends "base.html" %}

{% block head %}
	<link rel="alternate" type="application/rss+xml" title="RSS" href="https://blog.ipfire.org/feed.xml" />
{% end block %}

{% block title %}{{ _("Welcome to IPFire") }}{% end block %}

{% block container %}
	<header class="cover">
		<div class="container d-flex h-100 align-items-center">
			<div class="row flex-fill flex-md-row-reverse">
				<div class="col-12 col-md-5 my-5 text-center">
					<img class="img-fluid" src="{{ static_url("img/ipfire-tux.png") }}" alt="IPFire Logo" />
				</div>

				<div class="col-12 col-md-7 align-self-center px-3">
					<h1>{{ _("The Open Source Firewall") }}</h1>

					<div class="btn-toolbar my-5">
						<a class="btn btn-outline-primary btn-glow-primary btn-lg mr-2" href="/download">{{ _("Download") }}</a>
						<a class="btn btn-outline-secondary btn-glow-secondary btn-lg ml-2" href="/features">{{ _("Features") }}</a>
					</div>
				</div>
			</div>
		</div>
	</header>

	<section class="inverse">
		<div class="container">
			<div class="row mb-5">
				<div class="col-12 col-md-9 col-lg-7">
					<h1 class="mb-0">{{ _("Secure your network with IPFire") }}</h1>

					<p>
						{{ _("IPFire is a versatile, state-of-the-art Open Source firewall based on Linux.") }}
						{{ _("Its ease of use, high performance in any scenario and extensibility make it usable for everyone.") }}
					</p>

					<a class="btn btn-secondary mb-5" href="/features">{{ _("Learn More") }}</a>
				</div>
			</div>

			<div class="row mt-5">
				<div class="col-md-6 col-lg-4 mb-5 d-flex">
					<div class="align-self-stretch">
						<span class="fas fa-shield-alt fa-2x text-primary px-3"></span>
					</div>

					<div class="flex-column">
						<h5 class="mb-3">{{ _("Security") }}</h5>

						<p>
							{{ _("Security is the highest priority in IPFire.") }}
							{{ _("It is hardened to protect itself from attacks from the Internet and prevents attacks on your network.") }}
						</p>
					</div>
				</div>

				<div class="col-md-6 col-lg-4 mb-5 d-flex">
					<div class="align-self-stretch">
						<span class="fas fa-fire fa-2x text-primary px-3"></span>
					</div>

					<div class="flex-column">
						<h5 class="mb-3">{{ _("Firewall") }}</h5>

						<p>
							{{ _("Its powerful firewall engine and Intrusion Prevention System protects your network against attacks from the Internet and Denial-of-Service attacks.") }}
						</p>
					</div>
				</div>

				<div class="col-md-6 col-lg-4 mb-5 d-flex">
					<div class="align-self-stretch">
						<span class="fab fa-osi fa-2x text-primary px-3"></span>
					</div>

					<div class="flex-column">
						<h5 class="mb-3">{{ _("Open Source") }}</h5>

						<p>
							{{ _("IPFire is free software and developed by an open community and trusted by hundreds of thousands of users from all around the world.") }}
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>

	<section>
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-6 col-lg-5 mb-5">
					<h1>{{ _("Latest Release") }}</h1>

					<p class="mb-0">
						<small>{{ locale.format_date(latest_release.date, shorter=True) }}</small>
					</p>

					<h3 class="mb-5">
						{% if latest_release.post %}
							<a href="https://blog.ipfire.org/post/{{ latest_release.post.slug }}">
								{{ _("%s has been released!") % latest_release.name }}
							</a>
						{% else %}
							{{ _("%s has been released!") % latest_release.name }}
						{% end %}
					</h3>

					<div class="row">
						<div class="col-12 col-sm-6 col-md-12 col-xl-5 mb-3">
							<a class="btn btn-primary btn-block" href="/download">
								<span class="fas fa-download"></span> {{ _("Download") }}
							</a>
						</div>

						<div class="col-12 col-sm-6 col-md-12 col-xl-5 mb-3">
							<a class="btn btn-secondary btn-block" href="/donate">
								<span class="fas fa-heart"></span> {{ _("Donate") }}
							</a>
						</div>
					</div>
				</div>

				<div class="col-12 col-md-6 col-lg-5 offset-lg-2">
					<h1>{{ _("What's going on?") }}</h1>

					<dl class="dl-horizontal">
						{% for post in posts %}
							<dt>
								<small>{{ locale.format_date(post.published_at, relative=True, shorter=True) }} &nbsp;</small>
							</dt>

							<dd class="text-overflow mb-4">
								<a href="https://blog.ipfire.org/post/{{ post.slug }}">{{ post.title }}</a>
							</dd>
						{% end %}
					</dl>

					<a class="btn btn-secondary" href="https://blog.ipfire.org/">{{ _("Read More") }}</a>
				</div>
			</div>
		</div>
	</section>
{% end block %}