#extend("main"):
  #export("body"):
  <div class="center">
    <h1>Welcome #capitalized(name)</h1>
    <div class="description">
      <p>
      <small>Please add your pro's and cons during the talk to the list below.</small>
      </p>
      <p>
      <small>You can add as many pros and cons as you would like.</small>
      </p>
    </div>
    <form id="proconForm" action="submitProOrCon">
      <select id="type", name="type">
        <option value="pro">Pro</option>
        <option value="con">Con</option>
      </select>
      <br>
      <input type="text" id="description" name="description" placeholder="Description" required>
      <br>
      <br>
      <input class="loginButton" type="submit" value="Submit">
    </form>
  </div>
  <div class="container">
    <div class="pros">
      <div class="counter-container">
        <h3 class="counter-label">Pros</h3>
        <h3 class="counter">Count: #count(pros)</h3>
      </div>
      <ul class="pros-list">
        #for(item in pros):
        <li>#(item.description)</li>
        #endfor
      </ul>
    </div>
    <div class="cons">
      <div class="counter-container">
        <h3 class="counter-label">Cons</h3>
        <h3 class="counter">Count: #count(cons)</h3>
      </div>
      <ul class="cons-list">
        #for(item in cons):
        <li>#(item.description)</li>
        #endfor
      </ul>
    </div>
  </div>
  #endexport
#endextend