<!DOCTYPE html>
<html lang="en" xmlns:tr="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Profile</title>
    <script
            src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
          integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
          crossorigin="anonymous">
    <link href="../static/App.css" rel="stylesheet" media="screen" th:href="@{/App.css}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script
            src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div th:replace="/base/baseapp :: header" class="App-header">...</div>
<div th:replace="/base/baseapp :: nav" class="nav-">...</div>
<div class="container">
    <div class="btn-group mb-5">
        <a class="btn button-go4me" th:href="@{/}">Back!</a>
        <a th:href="@{'/profile/config/'}" th:if="${myUser}" class="btn button-go4me">Edit profile!</a>
    </div>
    <div class="row bg-dark text-white"  style="border-radius: 21px 21px 21px 21px">
        <div class="col-md-12 pt-3 px-3 pt-md-5 pb-md-5 px-md-5">
            <h3>User Info</h3>
            <div class="row">
                <div class="col-md-4 row">
                    <div class="col-auto">Username:</div>
                    <div th:text="${User.getUserName()}" class="card-text col-auto"></div>
                </div>
                <div class="col-md-4 row">
                    <div class="card-title col-auto">Email: </div>
                    <div th:text="${User.getEmail()}" class="card-text col-auto"></div>
                </div>
                <div class="col-md-4 row mb-2">
                    <div class="text-black">
                        <div class="col-auto row">
                            <div class="card-title col-auto">Rating: </div>
                            <a  th:href="@{'/profile/' + ${User.getUserName()} + '?rating=1'}" class="col"><span id="estrella1"></span></a>
                            <a  th:href="@{'/profile/' + ${User.getUserName()} + '?rating=2'}" class="col"><span id="estrella2"></span></a>
                            <a  th:href="@{'/profile/' + ${User.getUserName()} + '?rating=3'}" class="col"><span id="estrella3"></span></a>
                            <a  th:href="@{'/profile/' + ${User.getUserName()} + '?rating=4'}" class="col"><span id="estrella4"></span></a>
                            <a  th:href="@{'/profile/' + ${User.getUserName()} + '?rating=5'}" class="col"><span id="estrella5"></span></a>

                            <script th:inline="javascript">

                                var rate = /*[[${User.getRate()}]]*/ '0';

                                if(rate >= 1){
                                    document.getElementById("estrella1").className = "fa fa-star checked";
                                }else if(rate >= 0.5){
                                    document.getElementById("estrella1").className = "fa fa-star-half-o checked";
                                }else{
                                    document.getElementById("estrella1").className = "fa fa-star-o checked";
                                }

                                if(rate >= 2){
                                    document.getElementById("estrella2").className = "fa fa-star checked";
                                }else if(rate >= 1.5){
                                    document.getElementById("estrella2").className = "fa fa-star-half-o checked";
                                }else{
                                    document.getElementById("estrella2").className = "fa fa-star-o checked";
                                }

                                if(rate >= 3){
                                    document.getElementById("estrella3").className = "fa fa-star checked";
                                }else if(rate >= 2.5){
                                    document.getElementById("estrella3").className = "fa fa-star-half-o checked";
                                }else{
                                    document.getElementById("estrella3").className = "fa fa-star-o checked";
                                }

                                if(rate >= 4){
                                    document.getElementById("estrella4").className = "fa fa-star checked";
                                }else if(rate >= 3.5){
                                    document.getElementById("estrella4").className = "fa fa-star-half-o checked";
                                }else{
                                    document.getElementById("estrella4").className = "fa fa-star-o checked";
                                }

                                if(rate === 5){
                                    document.getElementById("estrella5").className = "fa fa-star checked";
                                }else if(rate >= 4.5){
                                    document.getElementById("estrella5").className = "fa fa-star-half-o checked";
                                }else{
                                    document.getElementById("estrella5").className = "fa fa-star-o checked";
                                }

                            </script>

                            <!--<span th:text="'(' + ${User.getRate()} + '/5 -'"></span>
                            <span th:text="${User.getNumberOfRatings()} + ' rates)'"></span>-->

                        </div>
                    </div>
                </div>
                <div class="col-md-4 row">
                    <div class="card-title col-auto">Twitter: </div>
                    <div th:text="${User.getTwitterAccount()}" class="card-text col-auto"></div>
                </div>
                <div class="col-md-4 row">
                    <div class="card-title col-auto">Address 1: </div>
                    <div th:text="${User.getLocalization().getAddress1()}" class="card-text col-auto"></div>
                </div>
                <div class="col-md-4 row mb-2">
                    <div class="card-title col-auto">Address 2: </div>
                    <div th:text="${User.getLocalization().getAddress2() != null} ?
                            ${User.getLocalization().getAddress2()} : 'Empty value'" class="card-text col-auto"></div>
                </div>
                <div class="col-md-4 row">
                    <div class="card-title col-auto">Country: </div>
                    <div th:text="${User.getLocalization().getCountry()}" class="card-text col-auto"></div>
                </div>
                <div class="col-md-4 row">
                    <div class="card-title col-auto">ZIP Code: </div>
                    <div th:text="${User.getLocalization().getZipCode()}" class="card-text col-auto"></div>
                </div>
            </div>
        </div>
        <div class="card-body col-auto">
        </div>
    </div>
</div>
</body>
</html>