<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>page</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="/views/pages/assets/css/styles.min.css">
</head>

<body style="background: rgb(247,178,97);">
    <nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background: rgb(251,221,144);">
        <div class="container"><a class="navbar-brand" href="#">@<%=username%></a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse"
                id="navcol-1">
                <ul class="nav navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="/post">Timeline</a></li>
                    <li class="nav-item"><a class="nav-link" href="/users">Users</a></li>
                    <li class="nav-item"><a class="nav-link" href="/logout">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="text-center profile-card" style="margin: 15px;background: #f7b261;">
        <div><img class="rounded-circle" style="margin-top:70px;" src="<%=profilephoto%>" height="150px">
            <h3><%=user.name%></h3>
<%=user.bio%></p>
        </div>
        <div class="row" style="padding:0;padding-bottom:10px;padding-top:20px;">
            <div class="col-md-6">
                <p class="text-nowrap text-right">Following</p>
                <p class="text-right"><strong><%=following.length%></strong></p>
            </div>
            <div class="col-md-6">
                <p class="text-left">Posts</p>
                <p class="text-left"><strong>6</strong></p>
            </div>
        </div>
    </div>
    <div style="text-align: center;margin: 24px;"><button class="btn btn-primary" data-toggle="modal" data-target="#modal1" type="button" onclick="window.location.href = '/announcements';">Announcements</button></div>
    <div class="container-fluid bg-dark text-light" style="background: rgb(221,105,56);">
        <div style="background: #ff6060;">
            <div>
                <div class="row">
                    <div class="col d-flex flex-column justify-content-center align-items-center my-timeline-header" style="background: #ff6060;">
                        <h4 class="text-center"><%=user.name%><br></h4>
                        <p class="text-justify"><%=user.bio%><br></p>
                    </div>
                </div>
            </div>
            <div class="my-item-start-right">
                <div class="row my-card" style="background: #ff6060;">
                    <div class="col-5 offset-1 d-flex flex-column justify-content-center align-items-center my-card-text-col">
                        <div class="my-card-text js--fadeInLeft" style="filter: contrast(200%) grayscale(0%) hue-rotate(111deg) saturate(89%); height: 100%;">
                            <h5 class="text-right my-card-text-title"><%=user.about1%><br></h5>
                        </div>
                    </div>
                    <div class="col-3 d-flex flex-row justify-content-center align-items-center my-card-image-col col-md-2"><img class="img-fluid my-card-image" src="<%=pageimage.image1%>" alt="timeline-01"></div>
                </div>
            </div>
            <div class="my-item-middle-left">
                <div class="row my-card" style="background: #ff6060;">
                    <div class="col-3 offset-3 d-flex flex-row justify-content-center align-items-center my-card-image-col col-md-2 offset-md-4"><img class="img-fluid my-card-image" src="<%=pageimage.image2%>" alt="timeline-02"></div>
                    <div class="col-5 d-flex flex-column justify-content-center align-items-center my-card-text-col">
                        <div class="my-card-text js--fadeInRight" style="filter: grayscale(9%) hue-rotate(111deg) saturate(132%); height: 100%;">
                            <h5 class="my-card-text-title"><%=user.about2%><br></h5>
                            </div>
                    </div>
                </div>
            </div>
            <div class="my-item-middle-right">
                <div class="row my-card" style="background: #ff6060;">
                    <div class="col-5 offset-1 d-flex flex-column justify-content-center align-items-center my-card-text-col">
                        <div class="my-card-text js--fadeInLeft" style="filter: hue-rotate(111deg); height: 100%;">
                            <h5 class="text-right my-card-text-title"><%=user.about3%>s<br></h5>
                            </div>
                    </div>
                    <div class="col-3 d-flex flex-row justify-content-center align-items-center my-card-image-col col-md-2"><img class="img-fluid my-card-image" src="<%=pageimage.image3%>" alt="timeline-03"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script src="/views/pages/assets/js/script.min.js"></script>
</body>

</html>