<template>
  <q-page class="q-pa-sm ">
    <q-card class="" bordered flat>
      <q-card-section class="text-h6 ">
        <div class="text-h6">Редактировать профиль</div>
        <div class="text-subtitle2">Заполните свой профиль</div>
      </q-card-section>
      <q-card-section class="q-pa-sm ">
        <q-list class="row ">
          <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <q-item-section side>
              <q-avatar size="100px">
                <img src="https://i.ytimg.com/vi/IS7zaNHT-58/maxresdefault.jpg">
              </q-avatar>
            </q-item-section>
            <q-item-section>
              <q-btn label="Добавить фото" class="text-capitalize" rounded color="info" style="max-width: 120px"></q-btn>
            </q-item-section>
          </q-item>

          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.user_name" label="Имя пользователя" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.email" label="Адрес электронной почты" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.first_name" label="Имя" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.last_name" label="Фамилия" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input autogrow v-model="user_details.address" label="Адрес" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.city" label="Город" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input v-model="user_details.post_code" label="Почтовый индекс" />
            </q-item-section>
          </q-item>
          <q-item class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <q-item-section>
              <q-input type="textarea" v-model="user_details.about" label="обо мне" />
            </q-item-section>
          </q-item>
        </q-list>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn class="text-capitalize bg-info text-white">Обновить информацию пользователя</q-btn>
      </q-card-actions>
    </q-card>


    <q-card class="q-mt-sm" bordered flat>
      <q-card-section class="text-h6 q-pa-sm">
        <div class="text-h6">Изменить пароль</div>
      </q-card-section>
      <q-card-section class="q-pa-sm row">
        <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
          <q-item-section>
            Текущий пароль
          </q-item-section>
        </q-item>
        <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <q-item-section>
            <q-input type="password" outlined color="white" round v-model="password_dict.current_password"
              label="Текущий пароль" />
          </q-item-section>
        </q-item>
        <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
          <q-item-section>
            Новый пароль
          </q-item-section>
        </q-item>
        <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <q-item-section>
            <q-input type="password" outlined color="white" round v-model="password_dict.new_password"
              label="Новый пароль" />
          </q-item-section>
        </q-item>
        <q-item class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
          <q-item-section>
            Подтвердить новый пароль
          </q-item-section>
        </q-item>
        <q-item class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
          <q-item-section>
            <q-input type="password" outlined round color="white" v-model="password_dict.confirm_new_password"
              label="Подтвердить новый пароль" />
          </q-item-section>
        </q-item>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn class="text-capitalize bg-info text-white">Изменить пароль</q-btn>
      </q-card-actions>

    </q-card>
  </q-page>
</template>

<script >

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'UserProfile',
  setup() {
    return {
      user_details: {},
      password_dict: {}
    };
  }
});
</script>

<style scoped></style>
