<div class="mx-3 md:max-w-3xl lg:max-w-5xl md:mx-auto">
  <div class="border-b border-gray-200 py-4 sm:flex sm:items-center sm:justify-between">
    <div class="flex-1 min-w-0">
      <h1 class="text-2xl font-medium leading-6 text-gray-900 sm:truncate">
        <%= gettext("My account") %>
      </h1>
    </div>
    <div class="mt-4 flex sm:mt-0 sm:ml-4"></div>
  </div>

  <div class="mt-4">
    <%= if @live_action in [:edit_email] do %>
      <.live_component
        module={ClaperWeb.ModalComponent}
        class="hidden"
        id="modal-wrapper"
        title={@page_title}
        description={@page_description}
        return_to={~p"/users/settings"}
      >
        <div>
          <.form
            :let={f}
            for={@email_changeset}
            phx-submit="save"
            id="update_email"
            class="mt-5 md:flex md:items-end"
          >
            <%= hidden_input(f, :action, name: "action", value: "update_email") %>

            <ClaperWeb.Component.Input.email
              form={f}
              key={:email}
              name={gettext("Email")}
              required="true"
            />

            <%= submit(gettext("Save"),
              phx_disable_with: "Saving...",
              class:
                "mt-2 w-full h-14 inline-flex transition-all items-center justify-center px-4 py-2 shadow-sm font-medium rounded-md text-white bg-black hover:bg-primary-500 md:mt-0 md:ml-3 md:w-auto md:text-sm"
            ) %>
          </.form>
        </div>
      </.live_component>
    <% end %>

    <%= if @live_action in [:edit_password] do %>
      <.live_component
        module={ClaperWeb.ModalComponent}
        class="hidden"
        id="modal-wrapper"
        title={@page_title}
        description={@page_description}
        return_to={~p"/users/settings"}
      >
        <div>
          <.form
            :let={f}
            for={@password_changeset}
            phx-submit="save"
            id="update_password"
            class="mt-5 md:flex md:items-end gap-x-2"
          >
            <%= hidden_input(f, :action, name: "action", value: "update_password") %>

            <ClaperWeb.Component.Input.password
              form={f}
              key={:current_password}
              name={gettext("Current password")}
              required="true"
            />
            <ClaperWeb.Component.Input.password
              form={f}
              key={:password}
              name={gettext("New password")}
              required="true"
            />

            <%= submit(gettext("Save"),
              phx_disable_with: "Saving...",
              class:
                "mt-2 w-full h-14 inline-flex transition-all items-center justify-center px-4 py-2 shadow-sm font-medium rounded-md text-white bg-black hover:bg-primary-500 md:mt-0 md:ml-3 md:w-auto md:text-sm"
            ) %>
          </.form>
        </div>
      </.live_component>
    <% end %>

    <%= if @live_action in [:set_password] do %>
      <.live_component
        module={ClaperWeb.ModalComponent}
        class="hidden"
        id="modal-wrapper"
        title={@page_title}
        description={@page_description}
        return_to={~p"/users/settings"}
      >
        <div>
          <.form
            :let={f}
            for={@password_changeset}
            phx-submit="save"
            id="set_password"
            class="mt-5 md:flex md:items-end gap-x-2"
          >
            <%= hidden_input(f, :action, name: "action", value: "set_password") %>

            <ClaperWeb.Component.Input.password
              form={f}
              key={:password}
              name={gettext("New password")}
              required="true"
            />

            <ClaperWeb.Component.Input.password
              form={f}
              key={:password_confirmation}
              name={gettext("Confirm password")}
              required="true"
            />

            <%= submit(gettext("Save"),
              phx_disable_with: "Saving...",
              class:
                "mt-2 w-full h-14 inline-flex transition-all items-center justify-center px-4 py-2 shadow-sm font-medium rounded-md text-white bg-black hover:bg-primary-500 md:mt-0 md:ml-3 md:w-auto md:text-sm"
            ) %>
          </.form>
        </div>
      </.live_component>
    <% end %>

    <div class="shadow overflow-hidden sm:rounded-lg">
      <div class="py-5">
        <h3 class="text-lg leading-6 font-medium text-gray-900">
          <%= gettext("Personal informations") %>
        </h3>
        <p class="mt-1 max-w-2xl text-sm text-gray-500">
          <%= gettext("Your personal informations to access your account") %>
        </p>
      </div>
      <div class="border-t border-gray-200 py-5 sm:p-0">
        <dl class="sm:divide-y sm:divide-gray-200">
          <div class="py-4 sm:py-5 sm:grid sm:grid-cols-2 sm:gap-4">
            <dt class="text-sm font-medium text-gray-500">
              <%= gettext("Email address") %>
            </dt>
            <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
              <span class="flex-grow"><%= @current_user.email %></span>
              <span :if={!@is_external_user} class="ml-4 flex-shrink-0">
                <.link
                  patch={~p"/users/settings/edit/email"}
                  class="rounded-md font-medium text-purple-600 hover:text-purple-500"
                >
                  <%= gettext("Change") %>
                </.link>
              </span>
            </dd>

            <dt :if={!@is_external_user} class="text-sm font-medium text-gray-500">
              <%= gettext("Password") %>
            </dt>
            <dd :if={!@is_external_user} class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
              <span class="flex-grow">********</span>
              <span class="ml-4 flex-shrink-0">
                <.link
                  patch={~p"/users/settings/edit/password"}
                  class="rounded-md font-medium text-purple-600 hover:text-purple-500"
                >
                  <%= gettext("Change") %>
                </.link>
              </span>
            </dd>

            <dt :if={@is_external_user} class="text-sm font-medium text-gray-500">
              <%= gettext("Accounts linked") %>
            </dt>
            <dd class="text-sm text-gray-900 sm:col-span-2">
              <%= for account <- @oidc_accounts do %>
                <div class="text-sm text-gray-900 bg-white rounded-md py-2 px-4 shadow-base flex gap-x-2 items-center justify-start mt-2 sm:mt-0 mb-2">
                  <img src="/images/icons/openid.png" class="w-5" />
                  <span class="flex-grow flex items-center gap-x-2">
                    <span><%= account.provider %></span>
                    <div
                      :if={account.organization}
                      class="text-gray-500 text-xs flex items-center gap-x-1"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 16 16"
                        fill="currentColor"
                        class="h-3"
                      >
                        <path
                          fill-rule="evenodd"
                          d="M1.75 2a.75.75 0 0 0 0 1.5H2v9h-.25a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 .75-.75v-1.5a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 .75.75v1.5c0 .414.336.75.75.75h.5a.75.75 0 0 0 .75-.75V3.5h.25a.75.75 0 0 0 0-1.5h-7.5ZM3.5 5.5A.5.5 0 0 1 4 5h.5a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5v-.5Zm.5 2a.5.5 0 0 0-.5.5v.5A.5.5 0 0 0 4 9h.5a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5H4Zm2-2a.5.5 0 0 1 .5-.5H7a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-.5.5h-.5A.5.5 0 0 1 6 6v-.5Zm.5 2A.5.5 0 0 0 6 8v.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V8a.5.5 0 0 0-.5-.5h-.5ZM11.5 6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.75a.75.75 0 0 0 0-1.5H14v-5h.25a.75.75 0 0 0 0-1.5H11.5Zm.5 1.5h.5a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H12a.5.5 0 0 1-.5-.5V8a.5.5 0 0 1 .5-.5Zm0 2.5a.5.5 0 0 0-.5.5v.5a.5.5 0 0 0 .5.5h.5a.5.5 0 0 0 .5-.5v-.5a.5.5 0 0 0-.5-.5H12Z"
                          clip-rule="evenodd"
                        />
                      </svg>

                      <span><%= account.organization %></span>
                    </div>
                  </span>
                  <span :if={@allow_unlink_external_provider}>
                    <button
                      phx-click="unlink"
                      phx-value-issuer={account.issuer}
                      data-confirm={gettext("Are you sure you want to unlink this account?")}
                      class="font-medium text-red-600 hover:text-red-500"
                    >
                      <%= gettext("Unlink") %>
                    </button>
                  </span>
                </div>
              <% end %>
              <%= for account <- @lti_accounts do %>
                <div class="text-sm text-gray-900 bg-white rounded-md py-2 px-4 shadow-base flex gap-x-2 items-center justify-start mb-2">
                  <img src="/images/icons/lms.png" class="w-8" />
                  <span class="flex-grow">
                    LMS <span class="text-gray-500 text-xs">#<%= account.registration_id %></span>
                  </span>
                  <span :if={@allow_unlink_external_provider} class="ml-4 flex-shrink-0">
                    <button
                      phx-click="unlink"
                      phx-value-registration_id={account.registration_id}
                      data-confirm={gettext("Are you sure you want to unlink this account?")}
                      class="font-medium text-red-600 hover:text-red-500"
                    >
                      <%= gettext("Unlink") %>
                    </button>
                  </span>
                </div>
              <% end %>
            </dd>
          </div>
        </dl>
      </div>
      <div>
        <div class="py-5">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            <%= gettext("Preferences") %>
          </h3>
          <p class="mt-1 max-w-2xl text-sm text-gray-500">
            <%= gettext("Customize your account") %>
          </p>
        </div>
        <div class="border-t border-gray-200 py-5 sm:p-0">
          <dl class="sm:divide-y sm:divide-gray-200">
            <div class="mt-5">
              <.form :let={f} for={@preferences_changeset} phx-change="save">
                <%= hidden_input(f, :action, name: "action", value: "update_preferences") %>
                <ClaperWeb.Component.Input.select
                  form={f}
                  fieldClass="!w-auto"
                  labelClass="text-sm font-medium text-gray-500"
                  array={[
                    {"Deutsch", "de"},
                    {"English", "en"},
                    {"Español", "es"},
                    {"Français", "fr"},
                    {"Nederlands", "nl"}
                  ]}
                  key={:locale}
                  name={gettext("Language")}
                />
              </.form>
            </div>
          </dl>
        </div>
      </div>
      <div :if={!@is_external_user}>
        <div class="py-5">
          <h3 class="text-lg leading-6 font-medium text-gray-900">
            <%= gettext("Danger zone") %>
          </h3>
          <p class="mt-1 max-w-2xl text-sm text-gray-500">
            <%= gettext("Be careful, these actions are irreversible") %>
          </p>
        </div>
        <div class="border-t border-gray-200 py-5 sm:p-0">
          <dl class="sm:divide-y sm:divide-gray-200">
            <div class="mt-5">
              <button
                data-confirm={
                  gettext("All your events and files will be permanently deleted, are you sure?")
                }
                phx-click="delete_account"
                class="w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
              >
                <%= gettext("Delete account") %>
              </button>
            </div>
          </dl>
        </div>
      </div>
    </div>
  </div>
</div>
