<div class="row">
    <div class="col-md-6">
        <table class="table table-sm">
            <tr align="center" style=" border: 1px solid black;">
                <td style="border-top: 0;">Goal description <br>
                    Detemination of the measurement Indicator (s) and <br>
                    Overcoming Criteria</td>
            </tr>
        </table>
    </div>
    <div class="col-md-6">
        <table class="table table-sm">
            <tr align="center" style=" border: 1px solid black;">
                <td colspan="5" style="border-top: 0;">Evaluation </td>
            </tr>
            <tr align="center" style=" border: 1px solid black;">
                <td width="20%" style=" border: 1px solid black;">1 </td>
                <td width="20%" style=" border: 1px solid black;">2 </td>
                <td width="20%" style=" border: 1px solid black;">3 </td>
                <td width="20%" style=" border: 1px solid black;">4 </td>
                <td width="20%" style=" border: 1px solid black;">5 </td>
            </tr>
        </table>
    </div>
</div>

{% for ind in individual  %}
<div class="row">
    <div class="col-md-6 d-flex flex-column">
        <table class="table table-sm flex-fill">
            <tr align="center" style=" border: 1px solid black;" heigth="100%">
                <td rowspan="3" width="5%"  style=" vertical-align: middle; border: 1px solid black;">{{forloop.counter}} </td>
                <td style="vertical-align: middle; border: 1px solid black;"><strong>Goals / Activities</strong> </td>
                <td style=" border: 1px solid black; "><i>{{ind.parameter.goals|safe}}</i> </td>
            </tr>
            <tr align="center" style=" border: 1px solid black;">
                <td style="vertical-align: middle; border: 1px solid black;"><strong>Measuring Indicator (s)</strong> </td>
                <td style=" border: 1px solid black; color: black;"><i>{{ind.parameter.measuring|safe}}</i> </td>
            </tr>
            <tr align="center" style=" border: 1px solid black;">
                <td style="vertical-align: middle; border: 1px solid black;"><strong>Criteria for overcoming</strong> </td>
                <td style=" border: 1px solid black; color: black;"><i>{{ind.parameter.criteria|safe}}</i> </td>
            </tr>

        </table>
    </div>
    <div class="col-md-6 d-flex flex-column">
        <table class="table table-sm flex-fill">
            <tr align="center" style=" border: 1px solid black;">
                <td width="20%" style="vertical-align: middle; border: 1px solid black;">
                    {% if ind.choice.score == 1 %}
                    <p style="font-size: 29px;"> <i class="fa fa-check text-success" ></i> </p>
                    
                    {% endif %}
                    {% if ind.comments and ind.choice.score == 1 %}{{ ind.comments|safe }}{% endif %}
                </td>
                <td width="20%" style="vertical-align: middle; border: 1px solid black;">
                    {% if ind.choice.score == 2 %}
                    <p style="font-size: 29px;"> <i class="fa fa-check text-success" ></i> </p>
                    {% endif %}
                    {% if ind.comments and ind.choice.score == 2 %}{{ ind.comments|safe }}{% endif %}
                </td>
                <td width="20%" style="vertical-align: middle; border: 1px solid black;">
                    {% if ind.choice.score == 3 %}
                    <p style="font-size: 29px;"> <i class="fa fa-check text-success" ></i> </p>
                    {% endif %}
                    {% if ind.comments and ind.choice.score == 3 %}{{ ind.comments|safe }}{% endif %}
                
                </td>
                <td width="20%" style="vertical-align: middle; border: 1px solid black;">
                    {% if ind.choice.score == 4 %}
                    <p style="font-size: 29px;"> <i class="fa fa-check text-success" ></i> </p>
                    {% endif %}
                    {% if ind.comments and ind.choice.score == 4 %}{{ ind.comments|safe }}
                    {% endif %}
                </td>
                <td width="20%" style="vertical-align: middle; border: 1px solid black;">
                    {% if ind.choice.score == 5 %}
                    <p style="font-size: 29px;"> <i class="fa fa-check text-success" ></i> </p>
                    {% endif %}
                    {% if ind.comments and ind.choice.score == 5 %}{{ ind.comments|safe }}{% endif %}
                
                </td>
            </tr>
            
        </table>
    </div>
</div>
{% endfor %}
<div class="row">
    <div class="col-md-6 d-flex flex-column">
    </div>
    <div class="col-md-6 d-flex flex-column">
        <table class="table table-sm flex-fill">
            <tr align="center" style=" border: 1px solid black;">
                <td style="vertical-align: middle; border: 1px solid black;" colspan="3">
                    <strong>Score of parameter</strong>
                </td>
                <td width="20%" style="vertical-align: middle; border: 1px solid black;">
                    {% if objects.score_a %}
                        {{objects.score_a}}
                    {% else %}
                        0
                    {% endif %}
                </td>
            </tr>
            
        </table>
    </div>
</div>