<!-- Main container -->
<div class="container">

  <!-- Ordered list that hold the steps -->
  <ol>
    
    <!-- Step 1: Text -->
    <li>
      <h2>Read the following text:</h2>
  
      <div id="text_container" class="passage word_split">
          {{sentence}}
      </div>
      <br/>
    </li>
    
    <!-- Step 2: Selectable snipptes list -->
    <li>
      <div class="snippet_container">
        
        <h2>Select all statements that are expressed in the text above: </h2>
        <div class="snippets">
          
          
          
          <div class="placeholder"> 
            <button type="button" class="clickbutton btn" tagtype="description"></button>
            <p>
              <b>{{term1}}</b> is/was a member/employee of
              <b>{{term2}}</b>
            </p>
          </div>
          
          
          <div class="placeholder"> 
            <button type="button" class="clickbutton btn" tagtype="description"></button>
            <p>
              <b>{{term2}}</b>  was founded by
              <b>{{term1}}</b>
            </p>
          </div>
          
          
          
          <div class="placeholder"> 
            <button type="button" class="clickbutton btn" tagtype="description"></button>
            <p>
              <b>{{term1}}</b> is/was a top member/employee of
              <b>{{term2}}</b>
            </p>
          </div>
          
          
          <div class="placeholder"> 
            <button type="button" class="clickbutton btn" tagtype="description"></button>
            <p>
              <b>{{term1}}</b> is a person who lives/lived in
              <b>{{term2}}</b>
            </p>
          </div>
          
          
          
          <div class="placeholder"> 
            <button type="button" class="clickbutton btn" tagtype="description"></button>
            <p>
              <b>{{term1}}</b> is a person who is/was born in
              <b>{{term2}}</b>
            </p>
          </div>
          
          
          
          <div class="placeholder"> 
            <button type="button" class="clickbutton btn" tagtype="description"></button>
            <p>
              <b>{{term1}}</b> is a person who died in
              <b>{{term2}}</b>
            </p>
          </div>
          
          
          <div class="placeholder"> 
            <button type="button" class="clickbutton btn" tagtype="description"></button>
            <p>
              <b>{{term1}}</b> is a person originating from
              <b>{{term2}}</b>
            </p>
          </div>
          
          
    
          <div class="placeholder" tagid="no_causal_relation">
            <button type="button" class="clickbutton btn" tagtype="description" tagid="no_causal_relation"></button> 
            <p>There is no valid expression above</p>
          </div>
        
        </div>
        <cml:text name="hiddeninput"></cml:text>
      </div>
    </li>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <li id="laststep" class="hidden">
      <h2>Explain why there is no causal relation between the highlighted words:</h2>
      <span class="inputgroup">
        <input type="text" id="notpossible" placeholder="Type your explanation here"/>
      </span>
    </li>
    <!-- Pre submit row; required so the last number is displayed, 
         The submitactions are contained in the CrowdFlower .form-actions element
    -->
    <br/>
    <li>
      <h2>Submit your result: </h2>
    </li>
  </ol>
  
  <!-- Additional fields -->
  
  <cml:hidden name="relations" value="" validates="required" />
  <cml:hidden name="explanation" value="" validates="required" />

</div>

<cml:hidden name="factor1" value="{{term1}}" />
<cml:hidden name="b1val" value="{{b1}}" />
<cml:hidden name="e1val" value="{{e1}}" />
<cml:hidden name="factor2" value="{{term2}}" />
<cml:hidden name="b2val" value="{{b2}}" />
<cml:hidden name="e2val" value="{{e2}}" />