<template>
  <div class="min-h-screen w-full p-4">
    <div class="section-title w-full mb-6 pt-3">
      <div class="flex flex-row items-center justify-between mb-4">
        <div class="flex flex-col">
          <div class="text-xs uppercase font-light text-gray-500">Pages</div>
          <div class="text-xl font-bold">User profile</div>
        </div>
      </div>
    </div>
    <div
      class="w-full p-4 mb-4 rounded-lg bg-white border border-gray-100 dark:bg-gray-900 dark:border-gray-800"
    >
      <div class="flex flex-row items-center justify-start p-4">
        <div class="py-2 px-2">
          <p class="text-base font-bold whitespace-nowrap">Lucas Smith</p>
          <p class="text-sm text-gray-500 whitespace-nowrap">Vital Database Dude</p>
          <div class="flex flex-row items-center justify-start w-full py-1 space-x-2">
            <svg
              stroke="currentColor"
              fill="none"
              stroke-width="2"
              viewBox="0 0 24 24"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="stroke-current text-xl text-twitter"
              height="1em"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"
              />
            </svg>
            <svg
              stroke="currentColor"
              fill="none"
              stroke-width="2"
              viewBox="0 0 24 24"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="stroke-current text-xl text-facebook"
              height="1em"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
            </svg>
            <svg
              stroke="currentColor"
              fill="none"
              stroke-width="2"
              viewBox="0 0 24 24"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="stroke-current text-xl text-instagram"
              height="1em"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
              <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
            </svg>
          </div>
        </div>
        <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
          <button
            class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
          >Subscribe</button>
          <button
            class="btn btn-default btn-rounded bg-blue-500 hover:bg-blue-600 text-white"
          >Follow</button>
        </div>
      </div>
      <div class="flex flex-wrap">
        <div class="w-full p-4">
          <div class="flex flex-wrap flex-col w-full tabs">
            <div class="flex lg:flex-wrap flex-row lg:space-x-2">
              <div class="flex-none">
                <button class="tab tab-underline tab-active" type="button">Account settings</button>
              </div>
              <div class="flex-none">
                <button class="tab tab-underline" type="button">Email preferences</button>
              </div>
              <div class="flex-none">
                <button class="tab tab-underline" type="button">Security settings</button>
              </div>
            </div>
            <div class="tab-content block">
              <div class="py-4 w-full lg:w-1/2">
                <div class="flex flex-col">
                  <form class="form flex flex-wrap w-full">
                    <div class="w-full">
                      <div class="form-element">
                        <div class="form-label">First name</div>
                        <input
                          name="first-name"
                          type="text"
                          class="form-input"
                          placeholder="Enter you first name"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">Last name</div>
                        <input
                          name="last-name"
                          type="text"
                          class="form-input"
                          placeholder="Enter you last name"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">Email address</div>
                        <input
                          name="email"
                          type="email"
                          class="form-input"
                          placeholder="Enter you email address"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">Company</div>
                        <input
                          name="company"
                          type="text"
                          class="form-input"
                          placeholder="Enter you company"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">Position</div>
                        <input
                          name="position"
                          type="text"
                          class="form-input"
                          placeholder="Enter you position"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">Language</div>
                        <select name="language" class="form-select">
                          <option>Select language</option>
                          <option value="english">English</option>
                          <option value="spanish">Spanish</option>
                          <option value="portuguese">Portuguese</option>
                        </select>
                      </div>
                    </div>
                    <input
                      type="submit"
                      class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
                    />
                  </form>
                </div>
              </div>
            </div>
            <div class="tab-content hidden">
              <div class="py-4 w-full lg:w-1/2">
                <div class="flex flex-col">
                  <form class="form flex flex-wrap w-full">
                    <div class="w-full">
                      <div class="form-element">
                        <div class="form-label">Current email</div>
                        <input
                          name="email"
                          type="email"
                          class="form-input"
                          placeholder="Enter you current email address"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">New email</div>
                        <input
                          name="email"
                          type="email"
                          class="form-input"
                          placeholder="Enter you new email address"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">Daily updates</div>
                        <div class="flex items-center justify-start space-x-2">
                          <label class="flex items-center justify-start space-x-2">
                            <input
                              type="radio"
                              name="daily-updates"
                              class="form-radio h-4 w-4"
                              value="yes"
                            />
                            <span class>Yes</span>
                          </label>
                          <label class="flex items-center justify-start space-x-2">
                            <input
                              type="radio"
                              name="daily-updates"
                              class="form-radio h-4 w-4"
                              value="no"
                            />
                            <span class>No</span>
                          </label>
                        </div>
                      </div>
                      <div class="form-element">
                        <div class="form-label">Weekly updates</div>
                        <div class="flex items-center justify-start space-x-2">
                          <label class="flex items-center justify-start space-x-2">
                            <input
                              type="radio"
                              name="weekle-updates"
                              class="form-radio h-4 w-4"
                              value="yes"
                            />
                            <span class>Yes</span>
                          </label>
                          <label class="flex items-center justify-start space-x-2">
                            <input
                              type="radio"
                              name="weekle-updates"
                              class="form-radio h-4 w-4"
                              value="no"
                            />
                            <span class>No</span>
                          </label>
                        </div>
                      </div>
                    </div>
                    <input
                      type="submit"
                      class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
                    />
                  </form>
                </div>
              </div>
            </div>
            <div class="tab-content hidden">
              <div class="py-4 w-full lg:w-1/2">
                <div class="flex flex-col">
                  <form class="form flex flex-wrap w-full">
                    <div class="w-full">
                      <div class="form-element">
                        <div class="form-label">Current password</div>
                        <input
                          name="current-password"
                          type="password"
                          class="form-input"
                          placeholder="Enter your current password"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">New password</div>
                        <input
                          name="new-password"
                          type="password"
                          class="form-input"
                          placeholder="Enter your new password"
                        />
                      </div>
                      <div class="form-element">
                        <div class="form-label">Confirm new password</div>
                        <input
                          name="confirm-new-password"
                          type="password"
                          class="form-input"
                          placeholder="Enter your new password confirmation"
                        />
                      </div>
                    </div>
                    <input
                      type="submit"
                      class="btn btn-default bg-blue-500 hover:bg-blue-600 text-white btn-rounded"
                    />
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import axios from "redaxios";
import Toastify from "toastify-js";
</script>