<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="3" style="border-top: 0;">Monitoring </td>
            </tr>
            <tr align="center" style=" border: 1px solid black;">
                <td width="30%" style=" border: 1px solid black;">Progress </td>
                <td width="30%" style=" border: 1px solid black;">Dificulties </td>
                <td width="40%" style=" border: 1px solid black;">Need Improvement </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}} 
                    {% if objects.is_lock == False %}
                      
                        <a href="{% url 'eval-conf-plan-update-a' ind.hashed %}"><i class="fa fa-pencil" title="Update"></i></a>
                        <a href="{% url 'eval-conf-plan-delete-a' ind.hashed objects.hashed %}"><i class="fa fa-trash" title="Delete"></i></a>
                    {% endif %}
                </td>
                <td style="vertical-align: middle; border: 1px solid black;"><strong>Goals / Activities</strong> </td>
                <td style=" border: 1px solid black; "><i>{{ind.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.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.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="30%" style="vertical-align: middle; border: 1px solid black;">
                    {% if ind.progress %}
                    {{ind.progress|safe}}
                    {% else %}
                    - 
                    {% endif %}
                </td>
                <td width="30%" style="vertical-align: middle; border: 1px solid black;">
                    {% if ind.dificulties %}
                    {{ind.dificulties|safe}}
                    {% else %}
                    - 
                    {% endif %}
                </td>
                <td width="40%" style="vertical-align: middle; border: 1px solid black;">
                    {% if ind.need_improv %}
                    {{ind.need_improv|safe}}
                    {% else %}
                    - 
                    {% endif %}
                
                </td>
            </tr>
        </table>
    </div>
</div>
{% endfor %}