{% extends "templates/lilcity/index.html" %} {% load static %} {% load thumbnail %} {% block content %}
<div class="section section_gray section_menu">
  <div class="section__center center center_xs">
    <div class="menu">
      <a class="menu__link active" href="{% url 'user-edit-profile' user.id %}">Профиль</a>
      <a class="menu__link" href="{% url 'user-edit-notifications' user.id %}">Уведомления</a>
      <a class="menu__link" href="{% url 'user-edit-payments' user.id %}">Платежи</a>
    </div>
  </div>
</div>
{% if not user.is_email_proved %}
<div class="section section_confirm">
  <div class="section__center center center_xs">
    <div class="confirm">
      <div class="confirm__title title">Подтверждение почты</div>
      <div class="confirm__content">На электронный адрес
        <strong>{{ user.email }}</strong> отправлено письмо для подтверждения.</div>
        <div class="confirm__content">Если письмо где-то затерялось, вы можете повторить отправку письма для подтверждения. Отправить?</div>
        <a style="margin-top:18px; margin-left: 90px" href="{% url 'resend-email-verify' %}" class="confirm__btn btn btn_dark">ОТПРАВИТЬ ПИСЬМО</a>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% if messages %}
<div class="section section_gray section_menu">
  <div class="section__center center center_xs">
  {% for message in messages %}
  <div class="message message_{{ message.tags }}">{{ message }}</div>
  {% endfor %}
</div>
</div>
{% endif %}
<div class="section section_gray">
  <div class="section__center center center_xs">
    <div class="form">
      <form action="" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="form__group">
          <div class="form__title">Личные данные</div>
          <div class="form__ava ava">
            {% thumbnail user.photo "120x120" crop="center" as im %}
            <img id="photo" class="ava__pic" src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" />
            {% empty %}
            <img id="photo" class="ava__pic" src="{% static 'img/user_default.jpg' %}" width="120px" height="120px" />
            {% endthumbnail %}
            <input name="photo" class="ava__input" type="file" accept='image/*' onchange='openFile(event)'>
            <div class="ava__icon">
              <svg class="icon icon-photo">
                <use xlink:href="{% static 'img/sprite.svg' %}#icon-photo"></use>
              </svg>
            </div>
          </div>
          <div class="form__fieldset">
            <div class="form__field field{% if form.first_name.errors %} error{% endif %}">
              <div class="field__label">ИМЯ</div>
              <div class="field__wrap">
                <input name='first_name' class="field__input" type="text" placeholder="Имя" value="{{ user.first_name }}">
              </div>
              {% for error in form.first_name.errors %}
              <div class="field__error">{{ error }}</div>
              {% endfor %}
            </div>
            <div class="form__field field{% if form.last_name.errors %} error{% endif %}">
              <div class="field__label">ФАМИЛИЯ</div>
              <div class="field__wrap">
                <input name='last_name' class="field__input" type="text" placeholder="Фамилия" value="{{ user.last_name }}">
              </div>
              {% for error in form.last_name.errors %}
              <div class="field__error">{{ error }}</div>
              {% endfor %}
            </div>
          </div>
          <div class="form__field field{% if form.email.errors %} error{% endif %}">
            <div class="field__label">Почта</div>
            <div class="field__wrap">
              <input name='email' class="field__input" type="email" placeholder="Почта" value="{{ user.email }}">
            </div>
            {% for error in form.email.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
          </div>
          <div class="form__field field{% if form.phone.errors %} error{% endif %}">
            <div class="field__label">Телефон</div>
            <div class="field__wrap">
              <input name='phone' class="field__input" type="phone" placeholder="+7 (999) 999-99-99" value="{{ user.phone }}">
            </div>
            {% for error in form.phone.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
          </div>
          <div class="form__fieldset">
            <div class="form__field field{% if form.city.errors %} error{% endif %}">
              <div class="field__label">ГОРОД</div>
              <div class="field__wrap">
                <input name='city' class="field__input" type="text" placeholder="Город" value="{% if user.city %}{{ user.city }}{% endif %}">
              </div>
              {% for error in form.city.errors %}
              <div class="field__error">{{ error }}</div>
              {% endfor %}
            </div>
            <div class="form__field field{% if form.country.errors %} error{% endif %}">
              <div class="field__label">СТРАНА</div>
              <div class="field__wrap">
                <input name='country' class="field__input" type="text" placeholder="Страна" value="{% if user.country %}{{ user.country }}{% endif %}">
              </div>
              {% for error in form.country.errors %}
              <div class="field__error">{{ error }}</div>
              {% endfor %}
            </div>
          </div>
          <div class="form__fieldset">
            <div class="form__field field{% if form.birthday.errors %} error{% endif %}">
              <div class="field__label">ДАТА РОЖДЕНИЯ</div>
              <div class="field__wrap">
                <input name='birthday' class="field__input" type="text" placeholder="dd.mm.yyyy" value="{% if user.birthday %}{{ user.birthday | date:'d.m.Y' }}{% endif %}">
              </div>
              {% for error in form.birthday.errors %}
              <div class="field__error">{{ error }}</div>
              {% endfor %}
            </div>
            <div class="form__field field{% if form.gender.errors %} error{% endif %}">
              <div class="field__label">ПОЛ</div>
              <div class="field__wrap">
                <div class="field__select select js-select{% if user.gender and user.gender != 'n' %} selected{% endif %}">
                  <div class="select__head js-select-head">
                    {% if user.gender == 'f' %}Ж{% elif user.gender == 'm' %}M{% else %}М / Ж{% endif %}
                  </div>
                  <div class="select__drop js-select-drop">
                    <div class="select__option js-select-option" data-gender-option data-gender="m">
                      <div class="select__title">М</div>
                    </div>
                    <div class="select__option js-select-option" data-gender-option data-gender="f">
                      <div class="select__title">Ж</div>
                    </div>
                  </div>
                  <input id="gender" name='gender' class="select__input" type="hidden">
                </div>
              </div>
              {% for error in form.gender.errors %}
              <div class="field__error">{{ error }}</div>
              {% endfor %}
            </div>
          </div>
          <div class="form__field field{% if form.about.errors %} error{% endif %}">
            <div class="field__label">О себе</div>
            <div class="field__wrap">
              <textarea name='about' class="field__textarea" placeholder="Расскажите о себе и своем опыте">{% if user.about %}{{ user.about }}{% endif %}</textarea>
            </div>
            {% for error in form.about.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
        </div>
        </div>
        <div class="form__group">
          <div class="form__title">Пароль</div>
          <div class="form__field field{% if form.old_password.errors %} error{% endif %}">
            <div class="field__label">ТЕКУЩИЙ ПАРОЛЬ</div>
            <div class="field__wrap">
              <input name='old_password' class="field__input" type="password" placeholder="Введите текущий пароль">
            </div>
            {% for error in form.old_password.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
        </div>
          <div class="form__field field{% if form.new_password1.errors %} error{% endif %}">
            <div class="field__label">НОВЫЙ ПАРОЛЬ</div>
            <div class="field__wrap">
              <input name='new_password1' class="field__input" type="password" placeholder="Введите новый пароль">
            </div>
            {% for error in form.new_password1.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
        </div>
          <div class="form__field field{% if form.new_password2.errors %} error{% endif %}">
            <div class="field__label">ПОДТВЕРДИТЬ НОВЫЙ ПАРОЛЬ</div>
            <div class="field__wrap">
              <input name='new_password2' class="field__input" type="password" placeholder="Подтвердите новый пароль">
            </div>
            {% for error in form.new_password2.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
        </div>
        </div>
        <div class="form__group">
          <div class="form__title">Соцсети</div>
          <div class="form__field field{% if form.instagram.errors %} error{% endif %}">
            <div class="field__label">INSTAGRAM</div>
            <div class="field__wrap">
              <input name='instagram' class="field__input" type="text" placeholder="https://instagram.com/school.lil.city" value="{% if user.instagram %}{{ user.instagram }}{% endif %}">
            </div>
            {% for error in form.instagram.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
          </div>
          <div class="form__field field{% if form.facebook.errors %} error{% endif %}">
            <div class="field__label">FACEBOOK</div>
            <div class="field__wrap">
              <input name='facebook' class="field__input" type="text" placeholder="https://facebook.com/lilcitycompany" value="{% if user.facebook %}{{ user.facebook }}{% endif %}">
            </div>
            {% for error in form.facebook.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
          </div>
          <div class="form__field field{% if form.twitter.errors %} error{% endif %}">
            <div class="field__label">TWITTER</div>
            <div class="field__wrap">
              <input name='twitter' class="field__input" type="text" placeholder="https://twitter.com/lilcitycompany" value="{% if user.twitter %}{{ user.twitter }}{% endif %}">
            </div>
            {% for error in form.twitter.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
          </div>
          <div class="form__field field{% if form.pinterest.errors %} error{% endif %}">
            <div class="field__label">PINTEREST</div>
            <div class="field__wrap">
              <input name='pinterest' class="field__input" type="text" placeholder="https://pinterest.com/lilcitycompany" value="{% if user.pinterest %}{{ user.pinterest }}{% endif %}">
            </div>
            {% for error in form.pinterest.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
          </div>
          <div class="form__field field{% if form.youtube.errors %} error{% endif %}">
            <div class="field__label">YOUTUBE</div>
            <div class="field__wrap">
              <input name='youtube' class="field__input" type="text" placeholder="https://youtube.com/lilcitycompany" value="{% if user.youtube %}{{ user.youtube }}{% endif %}">
            </div>
            {% for error in form.youtube.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
          </div>
          <div class="form__field field{% if form.vkontakte.errors %} error{% endif %}">
            <div class="field__label">VKONTAKTE</div>
            <div class="field__wrap">
              <input name='vkontakte' class="field__input" type="text" placeholder="https://vk.com/lilcitycompany" value="{% if user.vkontakte %}{{ user.vkontakte }}{% endif %}">
            </div>
            {% for error in form.vkontakte.errors %}
            <div class="field__error">{{ error }}</div>
            {% endfor %}
        </div>
        </div>
        <div class="form__foot">
          <button type="submit" class="form__btn btn btn_md">СОХРАНИТЬ</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
var openFile = function(file) {
  var input = file.target;

  var reader = new FileReader();
  reader.onload = function(){
    var dataURL = reader.result;
    var output = document.getElementById('photo');
    output.src = dataURL;
  };
  reader.readAsDataURL(input.files[0]);
};
</script>

{% endblock content %}

{% block foot %}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

<script src="https://cdn.rawgit.com/RobinHerbots/jquery.inputmask/3.2.7/dist/min/jquery.inputmask.bundle.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/andr-04/inputmask-multi/1.2.0/js/jquery.inputmask-multi.min.js" type="text/javascript"></script>

<script>

  $(function(){
      var maskList = $.masksSort($.masksLoad("https://cdn.rawgit.com/andr-04/inputmask-multi/master/data/phone-codes.json"), ['#'], /[0-9]|#/, "mask");
      var maskOpts = {
          inputmask: {
              definitions: {
                  '#': {
                      validator: "[0-9]",
                      cardinality: 1
                  }
              },
              showMaskOnHover: false,
              autoUnmask: true,
              clearMaskOnLostFocus: false
          },
          match: /[0-9]/,
          replace: '#',
          list: maskList,
          listKey: "mask",
          onMaskChange: function(maskObj, determined) {
              if (determined) {
                  var hint = maskObj.name_en;
                  if (maskObj.desc_en && maskObj.desc_en != "") {
                      hint += " (" + maskObj.desc_en + ")";
                  }
                  $("#descr").html(hint);
              } else {
                  $("#descr").html("Mask of input");
              }
          }
      };

      $('[name=phone]').inputmasks(maskOpts);

  });


    // (new Inputmask('+7 (999) 999-99-99')).mask(document.querySelector('[name=phone]'));
</script>
{% endblock foot %}