.mx-auto.w-90p.py-6(class="sm:px-6 lg:px-8 md:max-w-7xl")
h1.text-3xl.font-bold Settings
p 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")
div
label.block.text-sm.font-medium.text-gray-700(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"
placeholder="John Doe"
v-model="me.name"
)
div
label.block.text-sm.font-medium.text-gray-700(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"
placeholder="john"
v-model="me.username"
)
div
label.block.text-sm.font-medium.text-gray-700(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"
placeholder="john@example.com"
v-model="me.email"
)
.py-3.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