{{ extends "global/Page.html" }}

{{ block title }}
    Feedback Page
{{ endblock }}

{{ block content }}

<div class="boxed">

        <table class="table_2">
            <tr>
                <th style="text-align: center">School:</th>
                <th><span style="font-weight:bold;">A</span></th>
                <th><span style="font-weight:bold;">B</span></th>
                <th><span style="font-weight:bold;">C</span></th>
            </tr>
            <tr style="outline: solid">
                <th style="text-align: center">Your Payoff:</th>
                <th><span style="font-weight:bold;">${{ your_payoffs.0 }}</span></th>
                <th><span style="font-weight:bold;">${{ your_payoffs.1 }}</span></th>
                <th><span style="font-weight:bold;">${{ your_payoffs.2 }}</span></th>
            </tr>
            <tr>
                <th style="text-align: center">Other Student 1's Payoff:</th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.0 }}</span></th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.1 }}</span></th>
                <th><span style="font-weight:bold;">${{ others_payoff_1.2 }}</span></th>
            </tr>
            <tr>
                <th style="text-align: center">Other Student 2's Payoff:</th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.0 }}</span></th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.1 }}</span></th>
                <th style="text-align: center"><span style="font-weight:bold;">${{ others_payoff_2.2 }}</span></th>
            </tr>
        
        
        </table>     
   
    <p></p>
    <p class="matching">You submitted the following list:</p>
    
    <table class="table_3">
            
            <tr>
                <th>1st Choice:</th>
                <th>{{ school_1 }}</th>
            </tr>
            <tr>
                <th>2nd Choice:</th>
                <th>{{ school_2 }}</th>
            </tr>
            <tr>
                <th>3rd Choice:</th>
                <th>{{ school_3 }}</th>
            </tr>
        
        
    </table> 

    
    <p></p>
    
    
    
    
        <p class="matching" style="font-weight:bold; margin-bottom: 0px;">
            Please explain why you listed schools in that order:
        </p>
        
        {{ formfield "reasoning" label="" }}    
        
    
 {{ next_button }}
    
</div>


{{ endblock }}



{{ block styles }}
    <style>
 
        
        p.matching{
            font-size: 18px; 
            text-align: justify;
                
                }
    
    </style>
    
    <style>
 

  .table_3{
  
    
  border-collapse: separate;
  
  width:50%;
  
  
  background:transparent;
  margin-left: auto; 
  margin-right: auto;
  font-size: 18px; 
  border: 1px solid black;
  padding: 15px;
  border-radius: 15px;
  
  
  
  }
  </style>

{{ endblock }}