<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>

<link type='text/css' href='<%=request.getContextPath()%>/css/general/changePassword.css' rel='stylesheet'
      media='screen'/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/main/changePassword.js"></script>
<style type="text/css">
    .viewMainPage {
        float: right;
    }

    .toStyle {
        float: left;
    }

    #validtoChangeUsername, #validtoChangeEmail, #validOldPassword1, #validPassword, #validCnfPassword1 {

        width: 200px !important;

    }
</style>
<div id="usLogout">

    <a href="logout.action" class="logout">
        <img src="<%=request.getContextPath()%>/images/logout/logout.png" width="32" height="32" title="Logout"
             style="border: none;"/>
    </a>
    <a href="viewMainPage.action" class="viewMainPage">
        <img src="<%=request.getContextPath()%>/images/networks/network1.png" width="32" height="32"
             title="Edit Profile" style="border: none;"/>
    </a>

    <div style="float: right;margin-right: 10px;">
        <s:property value="#session.user.username"/>
    </div>
</div>
<h3 id="titleProfile"> Editing Profile </h3>

<div id="changingOthers">
    <div style="width: 400px;float: left;">
        <div class="eachRow">

            <div class="eachRowLabel"> Username:</div>
            <input type="text" value="<s:property value="#session.user.username" />" class="toChangeUsername toStyle"/>
            <span id="validtoChangeUsername"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.username" />" name="toChangeUsernameHidden"/>


        <div class="eachRow">

            <div class="eachRowLabel"> Email:</div>
            <input type="text" value="<s:property value="#session.user.email" />" class="toChangeEmail toStyle"/>
            <span id="validtoChangeEmail"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.email" />" name="toChangeEmailHidden"/>

        <div class="eachRow">

            <div class="eachRowLabel"> Name:</div>
            <input type="text" value="<s:property value="#session.user.name" />" class="toChangeName toStyle"/>
            <span id="validtoChangeName"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.name" />" name="toChangeNameHidden"/>

        <div class="eachRow">

            <div class="eachRowLabel"> Surname:</div>
            <input type="text" value="<s:property value="#session.user.surname" />" class="toChangeSurname toStyle"/>
            <span id="validtoChangeSurname"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.surname" />" name="toChangeSurnameHidden"/>

        <div class="eachRow">

            <div class="eachRowLabel"> Phone:</div>
            <input type="text" value="<s:property value="#session.user.phone" />" class="toChangePhone toStyle"/>
            <span id="validtoChangePhone"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.phone" />" name="toChangePhoneHidden"/>

    </div>


    <p id="toChangePassword">Change password</p>
    <input type="hidden" name="isNormalOthers" value="0"/>

    <div id="savingProfile">
        <input type="button" value="Save" id="saveNewProfile"/>
        <input type="button" value="Cancel" id="cancelProfile"/>
    </div>
</div>

<div id="changingPassword">


    <div class="eachRow">
        <div class="eachRowLabel">Old Password:</div>
        <input type="password" name="changeOldPassword" id="changeOldPassword" value="" class="toStyle"/>
        <span id="validOldPassword1"></span>
    </div>
    <div class="eachRow">
        <div class="eachRowLabel">New password:</div>
        <input type="password" name="createNewPassword" id="createNewPassword" value="" class="toStyle"/>
        <span id="validNewPassword"></span>
    </div>

    <div class="eachRow">
        <div class="eachRowLabel">Confirm New password:</div>
        <input type="password" name="confirmNewPassword" id="confirmNewPassword" value="" class="toStyle"/>
        <span id="validCnfPassword1"></span>
    </div>
    <p id="toChangeOthers">Change Username and Email</p>
    <input type="hidden" name="isNormalPassword" value="false"/>

    <div id="savingPassword">
        <input type="button" value="Save" id="saveNewPassword"/>
        <input type="button" value="Cancel" id="cancelPassword"/>
    </div>
</div>
