@**
* Yona, 21st Century Project Hosting SW
*
* Copyright Yona & Yobi Authors & NAVER Corp.
* https://yona.io
**@
@(userForm: play.data.Form[User], user:User)

@import helper._
@import utils.TemplateHelper._
@import utils.HtmlUtil

@siteLayout(user.loginId, utils.MenuType.USER) {
<div class="site-breadcrumb-outer">
    <div class="site-breadcrumb-inner">
        <h3>@Messages("userinfo.accountSetting")</h3>
    </div>
</div>
<div class="page-wrap-outer">
    <div class="page-wrap">
        @partial_edit_tabmenu("profile")

        <form id="frmBasic" method="post" action="@routes.UserApp.editUserInfo" class="pull-left">
        <dl>
            <dt>@Messages("user.loginId")</dt>
            <dd class="mt10">
                <input type="text" class="text" value="@user.loginId" readonly>
            </dd>
          <dt>@Messages("user.name")</dt>
          <dd class="mt10">
            <input type="text" name="name" class="text" value="@HtmlUtil.defaultSanitize(user.name)">
          </dd>
          <dt>@Messages("user.email")</dt>
          <dd class="mt10">
            <input type="email" name="email" class="text" value="@user.email">
          </dd>
          <dd>
            <button type="submit" class="ybtn ybtn-success">@Messages("userinfo.editProfile")</button>
          </dd>
        </dl>
        </form>

        <form id="frmAvatar" method="post" action="@routes.UserApp.editUserInfo" class="pull-left" style="margin-left:50px; padding-left:50px; border-left:1px solid #ddd;">
          <input type="hidden" name="name" value="@user.name">
          <input type="hidden" name="email" value="@user.email">

          <div class="avatar-frm">
            <div class="avatar-wrap xlarge">
              <img src="@user.avatarUrl(256)" style="width:128px; max-width:none;" />
            </div>
            <div class="upload-progress avatar" style="display:none;"><div class="bar orange"></div></div>
            <div class="btn-wrap mt10 center-txt">
              <div class="ybtn ybtn-small fake-file-wrap btnUploadAvatar">
                @Messages("userinfo.changeAvatar")<!--
                --><input id="avatarFile" type="file" class="file" name="filePath" accept="image/*">
              </div>
            </div>
          </div>
        </form>

        <div class="reset-user-visited-list">
            <hr/>
            <form method="post" action="@routes.UserApp.resetUserVisitedList">
                <button type="submit" class="ybtn">@Messages("userinfo.reset.visited.project.list")</button>
            </form>
        </div>
        <div id="avatarCropWrap" class="modal hide" role="dialog" data-backdrop="static">
          <div class="modal-header center-txt">
            <div class="avatar-wrap xlarge">
              <img style="width:128px; max-width:none;"/>
            </div>
          </div>
          <div class="modal-body">
            <img style="max-width:500px;">
            <canvas width="128" height="128" class="hide"></canvas>
          </div>
          <div class="modal-footer">
            <button type="button" class="ybtn ybtn-default" data-dismiss="modal">@Messages("button.cancel")</button>
            <button type="button" class="ybtn ybtn-success btnSubmitCrop">@Messages("button.save")</button>
          </div>
        </div>

        <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/jcrop/jquery.Jcrop.css")" />
        <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/jquery/jquery.Jcrop.min.js")"></script>
        <script type="text/javascript" src="@routes.Assets.at("javascripts/lib/canvas-to-blob.js")"></script>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $yobi.loadModule("user.Setting");
    });
</script>
}