@page
@model AboutModel
@{
    ViewData["Title"] = "About";
    Layout = "_Layout";
}

<div class="about-me" style="display: flex; flex-direction: row; width: 100%; flex-grow: 1; justify-content: center; align-items: center;">
    <div class="languages-container" style="min-width: 20%;">
        <h3 style="width: 100%; text-align:center;">Known Languages</h3>
        @foreach(var language in Config.GetConfig().ProfileSection.Languages)
        {
            <div style="display: flex; flex-direction: row; align-items: center; border-top: solid 1px var(--bs-gray-800); padding: 0.25em 0; ">
                @if(language.Icon != null)
                {
                    <img src="@language.Icon" style="height: 2em; margin-right: 1em;" />
                }
                <h3 style="margin: 0 0 0 .25em;">@language.Name</h3>
                <h4 style="margin: 0 0 0 auto;">100%</h4>
            </div>
        }
    </div>
    <div class="about-me-container" style="display: flex; flex-direction: column; flex: 1; align-items: center; min-width: 60%; min-height: 40vh;">
        <h2>About Me</h2>
        @foreach(String s in Config.GetConfig().ProfileSection.Biography)
        {
            <p>@s</p>
        }
    </div>
    <div class="personals-container" style="min-width: 20%;">
        <div style="display: flex; flex-direction: row; align-items: center; padding: 0.25em 0; ">
            <img src="/content/img/user.svg" style="height: 2em; margin-right: 1em;" />
            <span style="margin: 0 0 0 .25em;">@Config.GetConfig().ProfileSection.Name</span>
        </div>
        <div style="display: flex; flex-direction: row; align-items: center; border-top: solid 1px var(--bs-gray-800); padding: 0.25em 0; ">
            <img src="/content/img/email.svg" style="height: 2em; margin-right: 1em;" />
            <span style="margin: 0 0 0 .25em;">@Config.GetConfig().ProfileSection.Email</span>
        </div>
        <div style="display: flex; flex-direction: row; align-items: center; border-top: solid 1px var(--bs-gray-800); padding: 0.25em 0; ">
            <img src="/content/img/phone.svg" style="height: 2em; margin-right: 1em;" />
            <span style="margin: 0 0 0 .25em;">@Config.GetConfig().ProfileSection.Phone</span>
        </div>
    </div>
</div>