extends layout

block content
  .mdl-grid
    .mdl-cell--3-offset-desktop
    .mdl-cell.mdl-cell--6-col.mdl-cell--12-col-tablet
      .demo-card-square.mdl-card.mdl-shadow--2dp
        .mdl-card__title.mdl-card--expand
          h2.mdl-card__title-text Exportieren
        .mdl-card__supporting-text
          | Hier kannst Du Deine Daten auf ein anderes Gerät oder in deine Notizen zu speichern!
          h4 Eigene UID
          pre= uid
          h4 QR-Code
          .mdl-grid
            .mdl-cell--3-offset-desktop
            .mdl-cell.mdl-cell--6-col.mdl-cell--12-col-tablet
              img(src=dataurl, style="width: 100%")

  .mdl-grid
    .mdl-cell--3-offset-desktop
    .mdl-cell.mdl-cell--6-col.mdl-cell--12-col-tablet
      .demo-card-square.mdl-card.mdl-shadow--2dp
        .mdl-card__title.mdl-card--expand
          h2.mdl-card__title-text Importieren
        .mdl-card__supporting-text
          | Hier kannst Du Deine Daten auf ein anderes Gerät oder in deine Notizen zu speichern!
          h4 Eigene UID
          form(action='#', onsubmit="loadUID(this)")
            .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label
              input#import.mdl-textfield__input(type='text')
              label.mdl-textfield__label(for='import') UID
            button.mdl-button.mdl-js-button.mdl-button--raised.mdl-js-ripple-effect.mdl-button--colored(type="submit")
              | Laden