v-container(fluid, grid-list-lg)
    v-layout(row wrap)
      v-flex(xs12)
        .admin-header
          img(src='/svg/icon-new-post.svg', alt='Mail', style='width: 80px;')
          .admin-header-title
            .headline.primary--text {{ $t('admin:mail.title') }}
            .subheading.grey--text {{ $t('admin:mail.subtitle') }}
          v-spacer
          v-btn(color='success', depressed, @click='save', large)
            v-icon(left) check
            span {{$t('common:actions.apply')}}
        v-form.pt-3
          v-layout(row wrap)
            v-flex(lg6 xs12)
              v-form
                v-card.wiki-form
                  v-toolbar(color='primary', dark, dense, flat)
                    v-toolbar-title
                      .subheading {{ $t('admin:mail.configuration') }}
                  v-subheader Sender
                  .px-3.pb-3
                    v-text-field(
                      outline
                      v-model='config.senderName'
                      label='Sender Name'
                      required
                      :counter='255'
                      prepend-icon='person'
                      )
                    v-text-field(
                      outline
                      v-model='config.senderEmail'
                      label='Sender Email'
                      required
                      :counter='255'
                      prepend-icon='email'
                      )
                  v-divider
                  v-subheader SMTP Settings
                  .px-3.pb-3
                    v-text-field(
                      outline
                      v-model='config.host'
                      label='Host'
                      required
                      :counter='255'
                      prepend-icon='memory'
                      )
                    v-text-field(
                      outline
                      v-model='config.port'
                      label='Port'
                      required
                      prepend-icon='router'
                      persistent-hint
                      hint='Usually 465 (recommended), 587 or 25.'
                      style='max-width: 300px;'
                      )
                    v-switch(
                      v-model='config.secure'
                      label='Secure (TLS)'
                      color='primary'
                      persistent-hint
                      hint='Should be enabled when using port 465, otherwise turned off (587 or 25).'
                      prepend-icon='vpn_lock'
                      )
                    v-text-field.mt-3(
                      outline
                      v-model='config.user'
                      label='Username'
                      required
                      :counter='255'
                      prepend-icon='lock_outline'
                      )
                    v-text-field(
                      outline
                      v-model='config.pass'
                      label='Password'
                      required
                      prepend-icon='lock'
                      type='password'
                      )
            v-flex(lg6 xs12)
              v-card.wiki-form
                v-form
                  v-toolbar(color='primary', dark, dense, flat)
                    v-toolbar-title
                      .subheading {{ $t('admin:mail.dkim') }}
                  .pa-3
                    .body-2.grey--text.text--darken-2 DKIM (DomainKeys Identified Mail) provides a layer of security on all emails sent from Wiki.js by providing the means for recipients to validate the domain name and ensure the message authenticity.
                    v-switch(
                      v-model='config.useDKIM'
                      label='Use DKIM'
                      color='primary'
                      prepend-icon='vpn_key'
                      )
                    v-text-field(
                      outline
                      v-model='config.dkimDomainName'
                      label='Domain Name'
                      :counter='255'
                      prepend-icon='vpn_key'
                      :disabled='!config.useDKIM'
                      )
                    v-text-field(
                      outline
                      v-model='config.dkimKeySelector'
                      label='Key Selector'
                      :counter='255'
                      prepend-icon='vpn_key'
                      :disabled='!config.useDKIM'
                      )
                    v-text-field(
                      outline
                      v-model='config.dkimPrivateKey'
                      label='Private Key'
                      prepend-icon='vpn_key'
                      persistent-hint
                      hint='Private key for the selector in PEM format'
                      :disabled='!config.useDKIM'
                      )