extends partials/page-templates/_layout.pug
include partials/mixins-demo/_nav-form.pug
include partials/mixins/_notification.pug
include partials/mixins-demo/_form-fields-demo.pug

block append variables
  -var active_nav_item = "form"
  -var sidebar = true
  - var page_title = "Locked form"

block content  
  .page__content__block
    h1 Locking form fields
      | 
      strong while data is being submitted
    p While data is being submited, you should set lock the fields, so that the user is prevented form changeing the input during submission, as also menitioned in the
      | 
      a(href="/form#locking") introduction
      |. During this process the submit button should also be set in a processing state, see the bottom of this page.
    
    +notification().notification--attention.notification--constrain-width.notification--vertical-margin
      p Note that the locked state of form fields, is only something that should be used during the short period of time, when data is being submitted to the server. If you need to visually communicate to the user, that the field is disabled you need to also
        | 
        a(href="form-visually-disabled") visually disable
        |
        | the field.
    
      
    +form-fields-demo(false, false, true)


block sidebar 

  +form-nav("form-locked")