<header class="header">
   <h1 class="heading">Semantic Web Forms - After</h1>
</header>

<main>
   <section>
      <form id="form" class="form" onsubmit="event.preventDefault()">
         <h2 class="form-heading">Software Engineer Questionnaire</h2>

         <!--   
                    Form Labels & Input
                    - Some assistive technologies do not correctly handle implicit labels (<label>First name <input type="text" name="firstname"></label>)
                    - Make sure the for="" attribute of the label and id="" attribute of the input match
                    - Make required fields obvious by using an indicator - border color change, asterisk, description text, etc
                    - The autocomplete attribue is optional, and could allow users to enable the browser to autofill details for fields they have entered info for previously 
                -->
         <div class="form-control">
            <label for="first-name" class="label">First Name:</label>
            <input id="first-name" type="text" autocomplete="name">
         </div>

         <div class="form-control">
            <label for="last-name" class="label">Last Name:</label>
            <input id="last-name" type="text">
         </div>

         <div class="form-control">
            <label for="email" class="label">Email:</label>
            <input id="email" type="email" autocomplete="email">
         </div>

         <div class="form-control">
            <label for="phone-number" class="label">Phone Number:</label>
            <input id="phone-number" type="tel" aria-labelledby="number-format" pattern="^\d{11}$">
            <small id="number-format">Phone Number Format: (xxxxxxxxxxx) 11 digits</small>
            <!-- Browsers that don't support type tel fall back to being a standard text input. -->
            <!-- Placeholder Attribute can be used to provide some example format, but shouldn't be the only source of hints -->
            <!-- HTML5 Pattern Formats: https://www.html5pattern.com/Phones -->
            <!-- Pattern Attribute is optional, but can provide some client side validation out of the box. -->
            <!-- The Pattern Attribute uses regex which checks for the format of the value which we put in the HTML input-->
         </div>

         <!--
          Checkboxes and Radio Options 
          - The <fieldset> surrounds the entire grouping of checkboxes or radio buttons
          - The <legend> provides a description for the grouping. 
          - role=group to indicate that the contained elements are members of a group
      -->
         <fieldset class="fieldset">
            <legend id="software-skills" class="legend">What Software Engineering skills do you have?</legend>
            <ul role="group" aria-labelledby="software-skills">
               <li class="checkbox-item">
                  <input id="html5" type="checkbox" name="skill" value="html5" />
                  <label for="html5">HTML5</label>
               </li>
               <li class="checkbox-item">
                  <input id="css" type="checkbox" name="skill" value="css" />
                  <label for="css">CSS</label>
               </li>
               <li class="checkbox-item">
                  <input id="javascript" type="checkbox" name="skill" value="javascript" />
                  <label for="javascript">JavaScript</label>
               </li>
               <li class="checkbox-item">
                  <input id="typescript" type="checkbox" name="skill" value="typescript" />
                  <label for="typescript">TypeScript</label>
               </li>
               <li class="checkbox-item">
                  <input id="nodejs" type="checkbox" name="skill" value="nodejs" />
                  <label for="nodejs">Node JS</label>
               </li>
               <li class="checkbox-item">
                  <input id="golang" type="checkbox" name="skill" value="golang" />
                  <label for="golang">Go Lang</label>
               </li>
               <li class="checkbox-item">
                  <input id="webgl" type="checkbox" name="skill" value="webgl" />
                  <label for="webgl">WebGL</label>
               </li>
            </ul>
         </fieldset>

         <!-- Radio Buttons -->
         <!-- The radiogroup role defines a container for a set of ARIA radio buttons. -->
         <fieldset class="fieldset">
            <legend id="preferred-framework" class="legend">What is your preferred JavaScript Framework?</legend>
            <ul class="radio-list" role="radiogroup" aria-labelledby="preferred-framework">
               <li class="radio-item">
                  <input type="radio" name="framework" id="react" value="react" />
                  <label for="react">React</label>
               </li>
               <li class="radio-item">
                  <input type="radio" name="framework" id="vue" value="vue" />
                  <label for="vue">Vue</label>
               </li>
               <li class="radio-item">
                  <input type="radio" name="framework" id="svelte" value="svelte" />
                  <label for="svelte">Svelte</label>
               </li>
               <li class="radio-item">
                  <input type="radio" name="framework" id="angular" value="angular" />
                  <label for="angular">Angular</label>
               </li>
               <ul>
         </fieldset>

         <!-- Select Options -->
         <label for="section1" class="label">What is your current role?</label>
         <select id="section1" name="section1">
            <option label="First select" disabled selected>First select</option>
            <option label="Client Servcies">Client Servcies</option>
            <option label="Full Stack Engineer">Full Stack Engineer</option>
            <option label="Project Manager">Project Manager</option>
            <option label="Software Engineer (FE)">Software Engineer (FE)</option>
            <option label="Software Engineer (BE)">Software Engineer (BE)</option>
            <option label="UI">UI</option>
            <option label="UX">UX</option>
         </select>

         <!-- Select Options with Grouping -->
         <label for="expertise" class="label">What is your strongest area of expertise?</label>
         <select id="expertise" name="expertise">
            <option label="Choose a Skill" disabled selected>Choose a Skill</option>
            <optgroup label="UI">
               <option label="- Design Systems" value="design-systems">Design Systems</option>
               <option label="- Figma" value="figma">Figma</option>
               <option label="- InVision" value="in-vision">InVision</option>
               <option label="- Micro Animations" value="micro-animations">Micro Animations</option>
               <option label="- Web Accessibility" value="accessibility">Web Accessibility</option>
            </optgroup>
            <optgroup label="UX">
               <option label="- Defining User Journeys" value="user-journeys">Defining User Journeys</option>
               <option label="- Focus Groups" value="focus-groups">Focus Groups</option>
               <option label="- User Research" value="user-research">User Research</option>
               <option label="- Web Accessibility" value="accessibility">Web Accessibility</option>
               <option label="- Wireframing" value="wire-framing">Wireframing</option>
            </optgroup>
            <optgroup label="FE">
               <option label="- HTML, CSS & JavaScript" value="html-css-js">HTML, CSS & JavaScript</option>
               <option label="- Client Side Performance" value="performance">Client Side Performance</option>
               <option label="- Client Side SEO" value="seo">Client Side SEO</option>
               <option label="- Responsive Builds" value="responsive-builds">Responsive Builds</option>
               <option label="- Web Accessibility" value="accessibility">Web Accessibility</option>
            </optgroup>
            <optgroup label="BE">
               <option label="- Go Lang" value="go">Go Lang</option>
               <option label="- Micro Services" value="micro-services">Micro Servcies</option>
               <option label="- PHP" value="php">PHP</option>
               <option label="- Rust" value="rust">Rust</option>
               <option label="- Security & Data Handling" value="security">Security & Data Handling</option>
            </optgroup>
         </select>

         <!-- Textarea -->
         <label for="about" class="label">Tell us about yourself:</label>
         <textarea id="about" name="abouttext" rows="8"></textarea>

         <!--
         Submit Button vs Input:

         Reason for using Button: 
         - Far more explicit and readable. 
         - Input suggests that the control is editable, or can be edited by the user; 
         - Button is far more explicit in terms of the purpose it serves
      -->
         <button id="submit" type="submit" class="submit animation" value="Submit the Contact Form">Submit</button>
      </form>
   </section>
</main>

<footer class="footer">

</footer>

$grey: #eeeeee;
$black: #333333;
$white: #ffffff;

@media (prefers-reduced-motion) {
   .animation {
      transition: none;
   }
}

*,
*:before,
*:after {
   box-sizing: border-box;
}

*:focus {
   outline: 2px solid $black;
}

body {
   font-family: "DM Sans", sans-serif;
   margin: 10%;
}

// Header Styles
.header {
   border-bottom: 1px solid $grey;
}

.heading {
   font-size: 2.5rem;
   text-align: center;
}

// Form Styles
.form {
   display: flex;
   flex-wrap: wrap;
   margin: 30px auto;
   padding: 40px;
   max-width: 750px;
   background: $grey;
}

.form-heading {
   margin: 10px 0 30px;
   width: 100%;
   font-size: 2rem;
   text-align: center;
}

.fieldset {
   margin: 20px 0;
   width: 100%;
   border: 2px solid $black;
}

.fieldset ul {
   padding: 0;
   list-style: none;
}

.legend {
   background-color: $black;
   color: #fff;
   padding: 5px 10px;
}

select {
   margin-bottom: 20px;
   padding: 0 5px;
   height: 45px;
   width: 100%;
}

label {
   font-size: 16px;
}

.label {
   margin-bottom: 5px;
   width: 100%;
}

input,
textarea,
select {
   font-family: "DM Sans", sans-serif;
   font-size: 16px;
   border: 2px solid $black;
}

textarea {
   padding: 10px;
   width: 100%;
}

small {
   display: block;
   margin-top: 5px;
}

.form-control {
   margin-bottom: 20px;
   width: 100%;
}

.form-control label {
   display: block;
   margin-bottom: 5px;
}

.form-control input {
   padding: 0 10px;
   height: 45px;
   width: 100%;
}

.checkbox-item {
   margin-bottom: 10px;
}

.radio-item {
   margin-bottom: 10px;
}

.submit {
   display: block;
   margin: 20px 0;
   padding: 10px 20px;
   width: 100%;
   color: $white;
   font-size: 18px;
   background-color: $black;
   border: 2px solid $black;
   cursor: pointer;
   transition: all 0.25s ease;

   &:hover,
   &:focus,
   &:active {
      color: $black;
      background-color: $white;
   }
}

.footer {
   margin-top: 40px;
   padding: 25px 25px 0;
   text-align: center;
   border-top: 1px solid $grey;
}

/*  Media Queries */
@media only screen and (min-width: 600px) {
   .heading {
      font-size: 3rem;
   }

   .form-heading {
      font-size: 2.5rem;
   }

   .form-control {
      width: 48.5%;
   }

   .form-control:nth-of-type(odd) {
      margin-right: 3%;
   }

   .submit {
      width: auto;
   }
}