<el-select
    v-model="currentSnippet"
    @change="updateCode"
    class="snippet-dropdown"
    placeholder="Select a snippet">

    <!-- new snippet option -->
    <el-option
        label="New Snippet"
        :value="null">
    </el-option>

    <!-- owner groups -->
    <template v-if="snippets">

        <el-option-group
            v-for="owner in Object.keys(snippets)"
            :key="owner"
            :label="owner">

                <!-- snippet options -->
                <el-option
                    v-for="snippet in snippets[owner]"
                    :key="snippet.id"
                    :label="snippet.Name"
                    :value="snippet"
                    value-key="id">
                </el-option>

        </el-option-group>

    </template>

</el-select>