@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.Languages)
        {
            <div style="display: flex; flex-direction: row; align-items: center; border-top: solid 1px var(--bs-gray-800); padding: 0.25em 0; ">
                <img src="@language.Value" style="height: 2em; margin-right: 1em;" />
                <h3 style="margin: 0 0 0 .25em;">@language.Key</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>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce commodo imperdiet hendrerit. Vestibulum pretium mauris eu sagittis tristique. Sed tellus nulla, facilisis in molestie id, fermentum facilisis nulla. Nullam vel tristique neque. Nam accumsan arcu vel nulla efficitur, posuere convallis diam rhoncus. Mauris mollis at sapien eu gravida. Nullam viverra velit porttitor ex mattis, in iaculis justo tincidunt. Morbi pulvinar odio nec mauris luctus facilisis. Phasellus aliquam commodo turpis. Quisque in tincidunt tellus, vel facilisis massa.</p>
        <p>Pellentesque auctor eros vitae pretium ornare. Donec quam erat, tempor id elit eu, aliquet suscipit mi. Morbi facilisis nisi vel dapibus facilisis. Phasellus efficitur ac odio id ultricies. Cras ullamcorper lacinia posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus lobortis, arcu a mollis venenatis, nisi libero cursus risus, ut sodales felis erat quis lorem. Praesent nisl turpis, egestas ac auctor et, tempor ac mauris. Donec aliquam lacus nisi, id hendrerit neque aliquam ut. Nullam maximus velit nulla, quis euismod lacus porttitor ac. Nullam lacinia non arcu vitae scelerisque. Nulla nisl nibh, vestibulum eget ex sit amet, viverra vulputate purus. Nullam non arcu ac diam sagittis consectetur.</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="img/user.svg" style="height: 2em; margin-right: 1em;" />
            <span style="margin: 0 0 0 .25em;">@Config.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="img/email.svg" style="height: 2em; margin-right: 1em;" />
            <span style="margin: 0 0 0 .25em;">@Config.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="img/phone.svg" style="height: 2em; margin-right: 1em;" />
            <span style="margin: 0 0 0 .25em;">@Config.Phone</span>
        </div>
    </div>
</div>