transition(:duration="400")
.modal(v-show='isShown', v-cloak)
transition(name='modal-background')
.modal-background(v-show='isShown')
.modal-container
transition(name='modal-content')
.modal-content.is-expanded(v-show='isShown')
header.is-green
span {{ $t('editor.codeblocktitle') }}
p.modal-notify(v-bind:class='{ "is-active": isLoading }')
span {{ $t('editor.codeblockloading', { name: modeSelected }) }}
i
section.is-gapless
.columns.is-stretched
.column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
.model-sidebar-header {{ $t('editor.codeblocklanguage') }}
.model-sidebar-content
p.control.is-fullwidth
select(v-model='modeSelected')
option(v-for='mode in modes', v-bind:value='mode.name') {{ mode.caption }}
.column.ace-container
#codeblock-editor
footer
a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('editor.discard') }}
a.button.is-green(v-on:click='insertCode') {{ $t('editor.codeblockinsert') }}