<template>
  <v-app theme="dark">
    <v-container>
      <v-row>
        <v-col>
          <v-dialog width="500">
            <template #activator="{ props }">
              <v-btn v-bind="props" text="Open Dialog" />
            </template>

            <template #default="{ isActive }">
              <v-card title="Dialog">
                <v-card-text>
                  Content goes here...

                  <v-text-field style="display: none" />
                  <v-text-field style="position: fixed" />
                  <v-text-field inert />
                </v-card-text>

                <v-card-actions>
                  <v-spacer />

                  <v-btn text="Close" @click="isActive.value = false" />
                  <v-btn text="Save" @click="isActive.value = false" />
                </v-card-actions>
                <v-text-field inert />
                <div contenteditable>
                  <p>Edit me</p>
                </div>
                <div contenteditable="false">
                  <p>Edit disabled</p>
                </div>
                <video max-width="450" src="https://cdn.jsek.work/cdn/vt-sunflowers.mp4" controls muted />
                <audio src="https://cdn.jsek.work/cdn/vt-sunflowers.mp4" controls />
                <details>
                  <summary>Expandable</summary>
                  Hidden content<v-btn text="I am only focusable if section is expanded" />
                </details>
              </v-card>
            </template>
          </v-dialog>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>