<template>
  <v-container>
    <h1 style="text-align:center">Media Device Settings</h1>
    <v-row>
      <v-col offset="5">
        <v-container>
          <v-row>
            <h3>Microphone Settings</h3>
          </v-row>
          <v-row>
            <v-col cols="3">
              <v-combobox label="Device" />
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="2">
              <v-slider />
            </v-col>
            <v-col cols="1">
              <v-switch label="Mute" />
            </v-col>
          </v-row>
        </v-container>
      </v-col>
    </v-row>
    <v-row>
      <v-col offset="5">
        <v-container>
          <v-row>
            <h3>Speaker Settings</h3>
          </v-row>
          <v-row>
            <v-col cols="3">
              <v-combobox label="Device" />
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="2">
              <v-slider />
            </v-col>
            <v-col cols="1">
              <v-switch label="Mute" />
            </v-col>
          </v-row>
        </v-container>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "MediaDevices"
};
</script>