extends ../../../layouts/LayoutComponent
include ../../../mixins/forms/Layout

include ../../../mixins/common/Form
include ../../../mixins/e-commerce/Checkout
include ../../../mixins/pages/Billing
include ../../../mixins/pages/profile/Events
include ../../../mixins/authentication/LoginForm
include ../../../mixins/authentication/SocialButtons
include ../../../mixins/authentication/RegisterBasicContent
include ../../../mixins/authentication/FormHeader
include ../../../mixins/pages/NotificationSettings
include ../../../mixins/calendar/Mixins
include ../../../mixins/pages/profile/ExperienceForm
include ../../../mixins/authentication/wizard/WizardContent
include ../../../mixins/home/feed/PostCreate
include ../../../mixins/authentication/PasswordResetForm
include ../../../mixins/authentication/ForgotPasswordForm
include ../../../mixins/email/Compose


prepend scripts
  script(src=`${CWD}vendors/dropzone/dropzone-min.js`)

append variables
  - 
    var countries = ["Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegowina", "Botswana", "Bouvet Island", "Brazil", "British Indian Ocean Territory", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad", "Chile", "China", "Christmas Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo", "Congo, the Democratic Republic of the", "Cook Islands", "Costa Rica", "Cote d'Ivoire", "Croatia (Hrvatska)", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands (Malvinas)", "Faroe Islands", "Fiji", "Finland", "France", "France Metropolitan", "French Guiana", "French Polynesia", "French Southern Territories", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Heard and Mc Donald Islands", "Holy See (Vatican City State)", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran (Islamic Republic of)", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, Democratic People's Republic of", "Korea, Republic of", "Kuwait", "Kyrgyzstan", "Lao, People's Democratic Republic", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libyan Arab Jamahiriya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia, The Former Yugoslav Republic of", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Micronesia, Federated States of", "Moldova, Republic of", "Monaco", "Mongolia", "Montserrat", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russian Federation", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Seychelles", "Sierra Leone", "Singapore", "Slovakia (Slovak Republic)", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Georgia and the South Sandwich Islands", "Spain", "Sri Lanka", "St. Helena", "St. Pierre and Miquelon", "Sudan", "Suriname", "Svalbard and Jan Mayen Islands", "Swaziland", "Sweden", "Switzerland", "Syrian Arab Republic", "Taiwan, Province of China", "Tajikistan", "Tanzania, United Republic of", "Thailand", "Togo", "Tokelau", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks and Caicos Islands", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "United States Minor Outlying Islands", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Virgin Islands (British)", "Virgin Islands (U.S.)", "Wallis and Futuna Islands", "Western Sahara", "Yemen", "Yugoslavia", "Zambia", "Zimbabwe"]
  
  -
    var pageHeader = {
      title: 'Layout',
      description: 'Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.',
      url: `https://getbootstrap.com/docs/${bootstrapVersion}/forms/layout`,
      linkText: "Form's layout on Bootstrap"
    }

block component
  +PageHeader(pageHeader)

  
  +ComponentCard({
    title: 'Basic form',
    anchor: true,
  }).mb-3
    +BasicForm
      
  +ComponentCard({
    title: 'Horizontal form',
    anchor: true,
    description:`Create horizontal forms with the grid by adding the <code>.row</code> class to form groups and using the <code>.col-*-*</code> classes to specify the width of your labels and controls. Be sure to add <code>.col-form-label</code> to your <code>&lt;label&gt;</code>s as well so they’re vertically centered with their associated form controls.`,
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    +HorizontalformExample

  +ComponentCard({
    title: 'Horizontal form label sizing',
    anchor: true,
    description:`Be sure to use <code>.col-form-label-sm</code> or <code>.col-form-label-lg</code> to your <code>&lt;label&gt;</code>s or <code>&lt;legend&gt;</code>s to correctly follow the size of <code>.form-control-lg</code> and <code>.form-control-sm</code>.`,
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    +HorizontalSizingExample
    
  +ComponentCard({
    title: 'Form grid',
    anchor: true,
    description:`More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.<strong>Requires the <code>$enable-grid-classes</code> Sass variable to be enabled (on by default).</strong>`,
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    +FormGridExample 
    
  +ComponentCard({
    title: 'Form Grid Layout',
    anchor: true,
    description:"More complex layouts can also be created with the grid system.",
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    +FormGridComplexExample 
    
  +ComponentCard({
    title: 'Grid - Column Sizing',
    anchor: true,
    description:"Grid system allows you to place any number of <code>.cols</code> within a <code>.row</code>. They’ll split the available width equally between them",
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    +GridColumnSizingExample 
    
  +ComponentCard({
    title: 'Grid - Auto Sizing',
    anchor: true,
    description:"To make columns only take up as much space as needed  change <code>.col</code> classes to <code>.col-auto</code>",
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    +GridAutoSizingExample
  
  +ComponentCard({
    title: 'Gutters',
    anchor: true,
    description:`By adding <a href="https://getbootstrap.com/docs/${bootstrapVersion}/layout/grid/#gutters" target='_blank'>gutter modifier classes</a>, you can have control over the gutter width in as well the inline as block direction. <strong>Also requires the <code>$enable-grid-classes</code> Sass variable to be enabled</strong> (on by default).`,
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    +GuttersExample 
  
  +ComponentCard({
    title: 'Inline forms',
    anchor: true,
    descriptionEl:`<p class='mt-2 mb-0'>Use the <code>.row-cols-*</code> classes to create responsive horizontal layouts. By adding <code>gutter modifier classes</code>, we’ll have gutters in horizontal and vertical directions. On narrow mobile viewports, the <code>.col-12</code> helps stack the form controls and more. The <code>.align-items-center</code> aligns the form elements to the middle, making the <code>.form-checkbox</code> align properly.</p>`,
    descriptionClass:'mt-2 mb-0'
  }).mb-3
    +InlineformsExample

  +ComponentCard({
    title: 'Utilities',
    anchor: true,
    description:`<a href="https://getbootstrap.com/docs/${bootstrapVersion}/utilities/spacing/" target="_blank">Margin utilities</a> are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to <code>margin-bottom</code> utilities, and using a single direction throughout the form for consistency.`,
    descriptionClass:'mt-2 mb-0'
  })
    +UtilitiesExample