{% extends 'settings/layout.html.twig' %}
{% block title %}{{'头像图片'|trans}} - {{ parent() }}{% endblock %}
{% set side_nav = 'avatar' %}
{% do script(['app/js/settings/avatar-crop/index.js']) %}

{% block main %}
<div class="panel panel-default panel-col">
  <div class="panel-heading">
    {{'头像设置'|trans}}
  </div>

  <div class="panel-body">
    <form id="avatar-crop-form" method="post">

      <div class="form-group clearfix">
        <div class="col-md-offset-2 col-md-8 controls">
          <img class="img-responsive" src="{{ filepath(pictureUrl) }}"
          id="avatar-crop"
          width="{{scaledSize.width}}" height="{{scaledSize.height}}" data-natural-width="{{ naturalSize.width }}" data-natural-height="{{ naturalSize.height }}" />
          <div class="help-block">{{'提示：请选择图片裁剪区域。'|trans}}</div>
        </div>
      </div>

      <div class="form-group clearfix">
        <div class="col-md-offset-2 col-md-8 controls">
          <a class="btn btn-fat btn-primary"
          id="upload-avatar-btn"
          data-url="{{path('settings_avatar_crop')}}"
          data-goto-url="{% if goto %}{{ goto }}{% else %}{{path('settings_avatar')}}{% endif %}"
          >{{'保存'|trans}}</a>
          <a href="javascript:;" class="js-go-back btn btn-link" data-goto-url="{% if goto %}{{ goto }}{% else %}{{path('settings_avatar')}}{% endif %}">{{'重新选择图片'|trans}}</a>
        </div>
      </div>

    </form>

  </div>
</div>
{% endblock %}

