{% extends 'base.html' %}

{% block titulo %}
    Convocatorias
{% endblock titulo %}

{% block body %}
    <div class="rounded-2 p-1 mx-4" style="color: #676767;">
        <div class="rounded-2 mx-4">
            <div class="row">
                <p class="col h3" style="font-weight: 600; padding-top: 40px;">Convocatoria mes-mes 202x</p>
                <!-- <hr> -->
            </div>
        </div>
        <div class="rounded-2 mx-4" style="padding-top: 30px;">          
            <div class="row">
                {% for modalidad in modalidades%}
                <div class="col-sm-4" style="padding-top: 10px; padding-bottom: 10px;">
                    <div class="card">
                        <div class="card-body" style="text-align: center; height: 320px;">
                            <h5 class="card-title">{{modalidad.nombre}}</h5>
                            <img class="imagen-modalidad" src="{{ modalidad.imagen.url }}" style="width: 170px; padding-bottom: 20px;" alt="Card image cap">
                            <br>
                            <a href="{% url 'solicitudes:documentos_convocatoria' modalidad.id %}" class="btn" style="background-color: #E4756F; color: #FFFFFF;  width: 170px; border-radius: 50px;">
                            Solicitar
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock body %}