.mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl")
h1.text-3xl.font-bold(class="dark:text-white") Settings
p(class="dark:text-white") Change your informations
form.mt-3(v-if="me")
.overflow-hidden.shadow(class="sm:rounded-md")
.space-y-6.bg-white.px-4.py-5(class="sm:p-6 dark:bg-gray-800")
div
label.block.text-sm.font-medium.text-gray-700(class="dark:text-white") Avatar
span.text-green-500.text-xs(v-if="avatarChanged") Avatar changed. Reload this page and/or clear your browser cache.
.mt-1.flex.items-center
user-avatar(:data="me")
input(type="file" hidden id="avatar" @change="editAvatar" accept="image/*")
label(
for="avatar"
class="ml-5 cursor-pointer rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
) Change
button(
type="button"
class="ml-5 cursor-pointer rounded-md border border-red-600 flex bg-red-600 py-2 px-3 text-sm font-medium leading-4 text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
@click="deleteAvatar"
v-if="me.avatar"
)
| Delete
div
label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="name") Name
.mt-1
input#name.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
name="name"
class="focus:border-green-500 focus:ring-green-500 sm:text-sm dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700"
placeholder="John Doe"
v-model="form.name"
)
div
label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="username") Username
.mt-1
input#email.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
name="username"
class="focus:border-green-500 focus:ring-green-500 sm:text-sm dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700"
placeholder="john"
v-model="form.username"
)
div
label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="email") Email
.mt-1
input#email.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
type="email"
name="email"
class="focus:border-green-500 focus:ring-green-500 sm:text-sm dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700"
placeholder="john@example.com"
v-model="form.email"
)
div
label.block.text-sm.font-medium.text-gray-700(class="dark:text-white" for="theme") Theme
.mt-1
select(
class="cursor-pointer rounded-md border border-gray-300 bg-white py-2 px-3 text-sm font-medium leading-4 text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-gray-600 dark:text-gray-50 dark:border-gray-700"
v-model="$colorMode.preference"
)
option(value="system" :selected="$colorMode.preference == 'system'") System
option(value="light" :selected="$colorMode.preference == 'light'") Light
option(value="dark" :selected="$colorMode.preference == 'dark'") Dark
.py-3.px-4.text-right(class="sm:px-6")
button.inline-flex.justify-center.rounded-md.border.border-transparent.bg-green-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm(
type="submit"
:class="{'hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2': true, 'opacity-25 cursor-default': isLoading}"
:disabled="isLoading"
:readonly="isLoading"
@click="save"
)
| Save