{% extends '../layout-growi/base/layout.html' %}

{% block html_title %}{{ customizeService.generateCustomTitle(t('User Settings')) }}{% endblock %}

{% block content_header %}
<header id="page-header">
  <h1 id="mypage-title" class="title">{{ t('User Settings') }}</h1>
</header>
{% endblock %}

{% block content_main %}
<div class="content-main">

  <ul class="nav nav-tabs mb-4" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" href="/me" role="tab" data-toggle="tab"><i class="icon-user"></i> {{ t('User Information') }}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/me/external-accounts" role="tab" data-toggle="tab"><i class="icon-share-alt"></i> {{ t('External Accounts') }}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/me/password" role="tab" data-toggle="tab"><i class="icon-lock"></i> {{ t('Password Settings') }}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/me/apiToken" role="tab" data-toggle="tab"><i class="icon-paper-plane"></i> {{ t('API Settings') }}</a>
    </li>
  </ul>

  <div class="tab-content">

  {% set smessage = req.flash('successMessage') %}
  {% if smessage.length %}
  <div class="alert alert-success grw-mt-10px">
    {{ smessage }}
  </div>
  {% endif %}

  {% set wmessage = req.flash('warningMessage') %}
  {% if wmessage.length %}
  <div class="alert alert-danger grw-mt-10px">
    {{ wmessage }}
  </div>
  {% endif %}

  {% if req.form.errors.length > 0 %}
  <div class="alert alert-danger grw-mt-10px">
    <ul>
    {% for error in req.form.errors %}
      <li>{{ error }}</li>
    {% endfor %}
    </ul>
  </div>
  {% endif %}


  <div class="form-box mt-3">
    <form action="/me" method="post" role="form">
      <fieldset>
        <legend class="border-bottom mb-4">{{ t('Basic Info') }}</legend>
        <div class="form-group row">
          <label for="userForm[name]" class="col-sm-2 col-form-label">Name</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" name="userForm[name]" value="{{ user.name }}" required>
          </div>
        </div>
        <div class="form-group">
          <div class="row">
            <label for="userForm[email]" class="col-sm-2 col-form-label">Email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control" name="userForm[email]" value="{{ user.email }}" aria-describedby="userForm[email]" required>
            </div>
          </div>
          <div class="offset-sm-2 col-sm-10">
            {% if getConfig('crowi', 'security:registrationWhiteList') && getConfig('crowi', 'security:registrationWhiteList').length %}
            <p id="userForm[email]" class="form-text text-muted">
              {{ t('page_register.form_help.email') }}
            <ul>
              {% for em in getConfig('crowi', 'security:registrationWhiteList') %}
              <li><code>{{ em }}</code></li>
              {% endfor %}
            </ul>
            </p>
            {% endif %}
          </div>
        </div>
        <div class="form-group row">
          <label for="userForm[isEmailPublished]" class="col-sm-2 col-form-label">{{ t('Disclose E-mail') }}</label>
          <div class="col-sm-4">
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="radioEmailShow"
                name="userForm[isEmailPublished]"
                value="{{ true }}"
                {% if user.isEmailPublished == true %}checked="checked"{% endif %}
                class="custom-control-input"
              > 
              <label class="custom-control-label" for="radioEmailShow">{{ t('Show') }}</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="radioEmailHide"
                name="userForm[isEmailPublished]"
                value="{{ false }}"
                {% if user.isEmailPublished == false %}checked="checked"{% endif %}
                class="custom-control-input"
              >
              <label class="custom-control-label" for="radioEmailHide">{{ t('Hide') }}</label>
            </div>
          </div>
        </div>
        <div class="form-group row {% if not user.lang %}has-error{% endif %}">
          <label for="userForm[lang]" class="col-sm-2 col-form-label">Language</label>
          <div class="col-sm-4">
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="radioLangEn"
                name="userForm[lang]"
                value="{{ consts.language.LANG_EN_US }}"
                class="custom-control-input"
                {% if user.lang == consts.language.LANG_EN_US %}checked="checked"{% endif %}
              >
              <label class="custom-control-label" for="radioLangEn">{{ t('English') }}</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="radioLangJa"
                name="userForm[lang]"
                value="{{ consts.language.LANG_JA }}"
                class="custom-control-input"
                {% if user.lang == consts.language.LANG_JA %}checked="checked"{% endif %}
              >
              <label class="custom-control-label" for="radioLangJa">{{ t('Japanese') }}</label>
            </div>
          </div>
        </div>

        <div class="form-group row">
          <div class="offset-sm-2 col-sm-10">
            <input type="hidden" name="_csrf" value="{{ csrf() }}">
            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>

  <div class="form-box mt-3">

    <!-- separeted form tag -->
    <form action="/me/imagetype" id="formImageType" method="post" class="form" role="form"></form>

    <fieldset>
      <legend class="border-bottom mb-5">{{ t('Set Profile Image') }}</legend>
      <div class="form-group row">
        <div class="col-sm-4 offset-sm-1">
          <h4>
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="radioGravatar"
                form="formImageType"
                name="imagetypeForm[isGravatarEnabled]"
                value="true"
                {% if user.isGravatarEnabled %}checked="checked"{% endif %}
                class="custom-control-input"
              >
              <label class="custom-control-label custom-control-inline" for="radioGravatar">
                <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" />
                <span class="pl-1">Gravatar</span>
              </label>
              <a href="https://gravatar.com/">
                <small>
                  <i class="icon-arrow-right-circle" aria-hidden="true"></i>
                </small>
              </a>
            </div>
          </h4>
  
          <img src="{{ user|gravatar }}" width="64">
        </div>
        <div class="col-sm-7">
          <h4>
            <div class="custom-control custom-radio custom-control-inline">
              <input
                type="radio"
                id="radioUploadPicture"
                form="formImageType"
                name="imagetypeForm[isGravatarEnabled]"
                value="false"
                {% if !user.isGravatarEnabled  %}checked="checked"{% endif %}
                class="custom-control-input"
              >
              <label for="radioUploadPicture" class="custom-control-label">{{ t('Upload Image') }}</label>
            </div>
          </h4>
          <div class="form-group">
            <div id="pictureUploadFormMessage" class=""></div>
            <div class="row">
              <label for="" class="col-sm-4">{{ t('Current Image') }}</label>
              <div class="col-sm-8">
                <p><img src="{{ user|uploadedpicture }}" class="picture picture-lg rounded-circle" id="settingUserPicture"></p>
                <form
                  id="remove-attachment"
                  action="/_api/attachments.removeProfileImage"
                  method="post"
                  class="form-horizontal"
                  style="{% if not user.imageAttachment %}display: none{% endif %}"
                >
                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
                  <button type="submit" class="btn btn-danger">{{ t('Delete Image') }}</button>
                </form>
              </div>
            </div>
          </div>
          <div class="row">
            <label for="" class="col-sm-4">{{ t('Upload new image') }}</label>
              <div class="col-sm-8">
                {% if fileUploadService.getIsUploadable() %}
                <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-group" role="form">
                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
                  <input type="file" name="profileImage" accept="image/*">
                  <div id="pictureUploadFormProgress" class="d-flex align-items-center"></div>
                </form>
                {% else %}
                * {{ t('page_me.form_help.profile_image1') }}<br>
                * {{ t('page_me.form_help.profile_image2') }}<br>
                {% endif %}
              </div>
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="offset-sm-4 col-sm-6">
          <button type="submit" form="formImageType" class="btn btn-primary">{{ t('Update') }}</button>
        </div>
      </div>
    </fieldset>
  </div><!-- /.form-box -->

  <script>
    $("#pictureUploadForm input[name=profileImage]").on('change', function(){
      if ($(this).val() == '') {
        return false;
      }

      var $form = $('#pictureUploadForm');
      var formData = new FormData();
      formData.append('file', this.files[0]);
      formData.append('_csrf', document.getElementsByName("_csrf")[0].value);

      $('#pictureUploadFormProgress').html('<div class="speeding-wheel-sm mr-2"></div> アップロード中...');
      $.ajax($form.attr("action"), {
        type: 'post',
        processData: false,
        contentType: false,
        data: formData
      })
      .then(function(data) {
        if (data.ok) {
          var attachment = data.attachment;
          $('#settingUserPicture').attr('src', attachment.filePathProxied + '?time=' + (new Date()));
          $('form#remove-attachment').show();
          $('form#remove-attachment input[name=attachment_id]').val(attachment.id);
          $('#pictureUploadFormMessage')
            .addClass('alert alert-success')
            .html('変更しました');
        }
        else {
          throw new Error('statis is invalid');
        }
      })
      .catch(function(err) {
        $('#pictureUploadFormMessage')
          .addClass('alert alert-danger')
          .html('変更中にエラーが発生しました。');
      })
      // finally
      .then(function() {
        $('#pictureUploadFormProgress').html('');
      });
      return false;
    });

    $('form#remove-attachment').on('submit', function(event) {
      // process with jQuery
      event.preventDefault();

      $.post($(this).attr('action'), $(this).serializeArray())
      .then(function(data) {
        if (data.ok) {
          $('#settingUserPicture').attr('src', '/images/icons/user.svg');
          $('form#remove-attachment').hide();
        }
        else {
          throw new Error('statis is invalid');
        }
      })
      .catch(function(err) {
        $('#pictureUploadFormMessage')
          .addClass('alert alert-danger')
          .html('変更中にエラーが発生しました。');
      })
    });
  </script>

  </div> {# end of .tab-contents #}

  {#
  <div class="form-box">
    <form action="/me/username" method="post" class="form-horizontal" role="form">
      <fieldset>
        <legend>ユーザーID (ユーザー名) の変更</legend>
      <div class="form-group">
        <label for="userNameForm[username]" class="col-sm-2 control-label">ユーザーID</label>
        <div class="col-sm-4">
          <input class="form-control" type="text" name="userNameForm[username]" value="{{ user.username }}" required>
          <p class="help-block">すべてのマイページの</p>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <p class="alert alert-warning">
          ユーザーIDを変更すると、<code>/user/{{ user.username }}</code> 以下のページがすべて <code>/user/新しいユーザーID</code> の下に移動されます。<br>
          また、これまでのページにリダイレクトは設定されず、この操作の取り消しもできません。<br>
          実行には十分に注意をしてください。
          </p>
          <button type="submit" class="btn btn-warning">ユーザーIDの変更を実行する</button>
        </div>
      </div>
    </fieldset>
    </form>
  </div>
  #}

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

{% block content_footer %}
{% endblock content_footer %}

{% block layout_footer %}
{% endblock layout_footer %}