@page
@using Props.Services.Content
@model IndexModel
@inject ITextualManager<IndexModel> ContentManager
@{
    ViewData["Title"] = "Home page";
}

<section class="jumbotron d-flex flex-column align-items-center">
    <div>
        <img alt="Props logo" src="~/images/logo.svg" class="img-fluid" style="max-height: 540px;"
            asp-append-version="true" />
    </div>
    <div class="text-center px-3 my-2 concise">
        <h1 class="my-2 display-1">Props</h1>
        <p>
            @ContentManager.Json.description
        </p>
    </div>
</section>

<section class="jumbotron sub">
    <div class="container d-flex flex-column align-items-center py-2 concise">
        <i class="bi bi-search" style="font-size: 5rem;"></i>
        <h2 class="mb-3 mt-4">@ContentManager.Json.help.title</h2>
        <form class="concise my-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="What are you looking for?" aria-label="Search"
                    aria-describedby="search-btn">
                <button class="btn btn-outline-primary" type="button" id="search-btn">Search</button>
            </div>
        </form>
        <p class="text-center">
            @ContentManager.Json.help.searchIntroduction
        </p>
        <p class="text-center">
            @ContentManager.Json.help.additionalInfo
        </p>
    </div>
</section>

<section class="container d-flex flex-column align-items-center my-3 less-concise">
    <h2 class="mb-3 mt-4">Our Mission</h2>
    <p class="text-center">
        @ContentManager.Json.mission
    </p>
</section>

<hr class="concise">

<section class="container d-flex flex-column align-items-center">
    <div class="less-concise d-flex flex-column align-items-center">
        <h2 class="mb-3 mt-4">Features</h2>
        <p class="center">
            @ContentManager.Json.features.description
        </p>
    </div>
    <div style="width: 100%;" data-simplebar>
        <div class="row px-2 py-3 flex-nowrap">
            @foreach (dynamic feature in ContentManager.Json.features.list)
            {
                <div class="card mx-2" style="width: 32rem;">
                    <div class="card-body">
                        <h5 class="card-title">@feature.title</h5>
                        <h6 class="card-subtitle mb-3 text-muted">
                            <slot name="subtitle">@feature.subtitle</slot>
                        </h6>
                        <p class="card-text">
                            @feature.text
                        </p>
                    </div>
                </div>
            }
        </div>
    </div>
</section>