#extend("main"):
  #export("body"):
  <div class="centered">
    <h1>Welcome #capitalized(name)</h1>
    <div class="spaced-cnt">
      <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>
    <br>
    <br>
  </div>
  <form id="proconForm" action="submitProOrCon">
    <div class="centered">
      <label class="form-control light" for="pro">
        <input type="radio" id="pro" name="type" value="pro" checked>
        Pro
      </label>
      <label class="form-control dark" for="con">
        <input type="radio" id="con" name="type" value="con">
        Con
      </label>
    </div>
    <br>
    <input type="text" id="description" name="description" placeholder="Description" required>
    <br>
    <br>
    <input class="btn btn-submit dark bg-dark light-radius" type="submit" value="Submit">
  </form>
  #if(count(pros) > 0 || count(cons) > 0):
  <div class="container">
    <div class="flex-cnt">
      <div class="counter-container">
        <h3 class="counter-label">Pros</h3>
        <h3 class="counter">Count: #count(pros)</h3>
      </div>
      #if(count(pros) > 0):
      <ul class="list light bg-light dark-radius">
        #for(item in pros):
        <li>#(item.description)</li>
        #endfor
      </ul>
      #endif
    </div>
    <div class="flex-cnt">
      <div class="counter-container">
        <h3 class="counter-label">Cons</h3>
        <h3 class="counter">Count: #count(cons)</h3>
      </div>
      #if(count(cons) > 0):
      <ul class="list dark bg-dark light-radius">
        #for(item in cons):
        <li>#(item.description)</li>
        #endfor
      </ul>
      #endif
    </div>
  </div>
  #endif
  #endexport
#endextend