{{ define "main" }}
{{ $lang := .Site.Language.Lang }}
<section class="section-header">
    <div class="columns-container" style="display: flex" >
        <div class="column col1 text-center vertical-center">
            <br>
            <h1 class="flex flex-center fill-width larger"><img src="/img/logo.svg" class="icon-twice-text" alt="Ad5001's icon"/>Ad5001</h1>
            {{ .Params.HeaderDescription | markdownify }}
            <div class="grid flex-center">&nbsp;
                {{ partial "links.html" .Params.Links }}
            </div>
            
            <div class="social-list grid flex-center padding-container-point3">
                {{ range .Site.Data.menu.social }}
                    <a role="button" alt="{{ .name }}" title="{{ .name }}" href="{{ replace .URL "<lang>" $lang }}">
                        <i class="icon-{{ .icon }}" alt="{{ .icon }} social icon"></i>
                    </a>
                {{ end }}
            </div>
            <br>
            <br>
            <br>
            <br>
        </div>
    </div>
</section>
<section class="section-skewed">
    <br>
    <h1 class="text-center">{{ i18n "softwareCommitments" }}</h1>
    <div class="columns-container padding-container-3" >
        <div class="column col3 vertical-center padding-container">
            <div class="card blue topleft2bottomright padding-container text-content">
                <h2 class="flex flex-center text-center">
                    <i class="icon-free icon-larger2-text" alt="Free (as in freedom) icon"></i>
                    {{ .Params.Cards.FLOSS.Title }}
                </h2>
                <p>
                    {{ .Params.Cards.FLOSS.Description | markdownify }}
                </p>
                <br>
                <div class="grid flex-center">&nbsp;
                    {{ partial "links.html" .Params.Cards.FLOSS.Links }}
                </div>
            </div>
        </div>
        <div class="column col3 vertical-center padding-container">
            <div class="card purple top2bottom padding-container text-content">
                <h2 class="flex flex-center text-center">
                    <i class="icon-privacy icon-larger2-text" alt="Privacy icon"></i>
                    {{ .Params.Cards.Privacy.Title }}
                </h2>
                <p>
                    {{ .Params.Cards.Privacy.Description | markdownify }}
                </p>
                <br>
                <div class="grid flex-center">&nbsp;
                    {{ partial "links.html" .Params.Cards.Privacy.Links }}
                </div>
            </div>
        </div>
        <div class="column col3 vertical-center padding-container">
            <div class="card yellow topright2bottomleft padding-container text-content">
                <h2 class="flex flex-center text-center">
                    <i class="icon-platforms icon-larger2-text" alt="Platforms icon"></i>
                    {{ .Params.Cards.Platforms.Title }}
                </h2>
                <p>
                    {{ .Params.Cards.Platforms.Description | markdownify }}
                </p>
                <br>
                <div class="grid flex-center">&nbsp;
                    {{ partial "links.html" .Params.Cards.Platforms.Links }}
                </div>
            </div>
        </div>
    </div>
</section>
<section class="padding-container-3">
    <h1>{{ .Params.NewSection.Title }}</h1>
    <p>
    {{ .Params.NewSection.Description | markdownify }}
    </p>
    <div class="grid">&nbsp;
        {{ partial "links.html" .Params.NewSection.Links }}
    </div>
    <br>
</section>
{{ end }}