templates/agenda/indexpostulantes.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block body %}
  4. {% if pendienteActualizacion %}
  5. <div class="alert alert-warning alert-dismissible fade show mx-3 mt-3" role="alert">
  6.    <div class="d-flex align-items-start">
  7.       <i class="la la-exclamation-triangle mr-2 mt-1" style="font-size:1.3rem;color:#f4a900;flex-shrink:0"></i>
  8.       <div style="flex:1">
  9.          <strong>Actualizaci&oacute;n de datos pendiente</strong><br>
  10.          <small class="text-muted">El equipo UC solicita que actualices tu informaci&oacute;n personal antes de continuar.</small>
  11.          <div class="mt-2">
  12.             <a href="{{ path('app_embajadores_actualiza', {'id': embajador.id}) }}" class="btn btn-warning btn-sm">
  13.                <i class="la la-edit"></i> Actualizar mis datos
  14.             </a>
  15.          </div>
  16.       </div>
  17.       <button type="button" class="close ml-2 mt-0" data-dismiss="alert"><span>&times;</span></button>
  18.    </div>
  19. </div>
  20. {% endif %}
  22. <div class="m-content emb-content">
  23. <div class="m-portlet m-portlet--full-height">
  25. <div class="m-portlet__head">
  26.    <div class="m-portlet__head-caption">
  27.       <div class="m-portlet__head-title">
  28.          <h3 class="m-portlet__head-text">Actividades disponibles</h3>
  29.       </div>
  30.    </div>
  31. </div>
  33. <div class="m-portlet__body px-2 py-3">
  35. {% set activo = 1 %}
  36. {% if embajador.tags %}
  37.    {% for tag in embajador.tags %}
  38.       {% if tag.nombre == "temporal" %}{% set activo = 0 %}{% endif %}
  39.    {% endfor %}
  40. {% endif %}
  42. {% set hay_eventos = false %}
  43. {% for agenda in agendas|sort((b, a) => a.fecha <=> b.fecha) %}
  44. {% if agenda.archivada != 1 and (activo == 1 or agenda.temporales == 1) %}
  45. {% set hay_eventos = true %}
  46. {% set estado_post = agenda.postulado(iduser) %}
  47. {% set card_id = 'ev' ~ loop.index %}
  49. <div class="emb-card{% if estado_post != 0 %} emb-card--activo{% endif %}">
  50.    <div class="emb-card__date">
  51.       <span class="emb-card__day">{{ agenda.fecha ? agenda.fecha|date('d') : '?' }}</span>
  52.       <span class="emb-card__month">{{ agenda.fecha ? agenda.fecha|date('M')|upper : '' }}</span>
  53.    </div>
  54.    <div class="emb-card__body">
  55.       <div class="emb-card__meta">
  56.          {% if agenda.tipoagenda %}<span class="badge badge-primary emb-badge">{{ agenda.tipoagenda.nombre }}</span>{% endif %}
  57.          {% if agenda.roles %}<span class="badge badge-warning emb-badge">Con roles</span>{% endif %}
  58.       </div>
  59.       <div class="emb-card__time">
  60.          {{ agenda.fecha ? agenda.fecha|date('H:i') : '' }}{% if agenda.hasta %} &ndash; {{ agenda.hasta|date('H:i') }}{% endif %}
  61.       </div>
  62.       <div class="emb-card__place">{{ agenda.lugar ?: 'Sin lugar asignado' }}</div>
  64.       <div class="mt-2">
  65.          {% if estado_post == 0 %}
  66.             {% if agenda.roles %}
  67.                <a href="{{ path('app_embajador_participante_newrol', {'id': agenda.id}) }}" class="btn btn-primary btn-sm emb-btn">
  68.                   <i class="la la-check"></i> Postular
  69.                </a>
  70.             {% else %}
  71.                <a href="{{ path('app_embajador_participante_postular', {'id': agenda.id}) }}" class="btn btn-primary btn-sm emb-btn">
  72.                   <i class="la la-check"></i> Postular
  73.                </a>
  74.             {% endif %}
  75.          {% elseif estado_post == "pendiente seleccion" %}
  76.             <a href="{{ path('app_embajador_participante_delete_byuser', {'id': agenda.postuladoid(iduser)}) }}"
  77.                class="btn btn-outline-danger btn-sm emb-btn">
  78.                <i class="la la-times"></i> Cancelar postulaci&oacute;n
  79.             </a>
  80.          {% elseif estado_post == "no seleccionado" %}
  81.             <span class="badge badge-secondary py-1 px-2">No seleccionado</span>
  82.          {% else %}
  83.             <span class="badge badge-success py-1 px-2"><i class="la la-check"></i> {{ estado_post }}</span>
  84.          {% endif %}
  85.       </div>
  87.       <a class="emb-toggle" href="#" onclick="embToggle('{{ card_id }}',this);return false;" aria-expanded="false">
  88.          <i class="la la-angle-down emb-toggle__icon"></i> Ver detalles
  89.       </a>
  90.    </div>
  91. </div>
  93. <div class="emb-collapse" id="{{ card_id }}" style="display:none">
  94.    <div class="emb-details">
  95.       <div class="row no-gutters">
  96.          {% if agenda.monto %}
  97.          <div class="col-6 emb-detail-item">
  98.             <span class="emb-detail-label">Monto</span>
  99.             <strong class="emb-detail-value" style="color:#5867dd">{{ agenda.monto }}</strong>
  100.          </div>
  101.          {% endif %}
  102.          {% if agenda.encargado %}
  103.          <div class="col-6 emb-detail-item">
  104.             <span class="emb-detail-label">Encargado</span>
  105.             <strong class="emb-detail-value">{{ agenda.encargado }}</strong>
  106.          </div>
  107.          {% endif %}
  108.          {% if agenda.taxi %}
  109.          <div class="col-6 emb-detail-item">
  110.             <span class="emb-detail-label">Taxi</span>
  111.             <strong class="emb-detail-value">{{ agenda.horariotaxi ?: 'Por confirmar' }}</strong>
  112.          </div>
  113.          {% endif %}
  114.          {% if agenda.bus %}
  115.          <div class="col-6 emb-detail-item">
  116.             <span class="emb-detail-label">Bus</span>
  117.             <strong class="emb-detail-value">{{ agenda.bus }}</strong>
  118.          </div>
  119.          {% endif %}
  120.          {% if agenda.nAlumnos %}
  121.          <div class="col-6 emb-detail-item">
  122.             <span class="emb-detail-label">Alumnos</span>
  123.             <strong class="emb-detail-value">{{ agenda.nAlumnos }}</strong>
  124.          </div>
  125.          {% endif %}
  126.          {% if agenda.direccion %}
  127.          <div class="col-12 emb-detail-item">
  128.             <span class="emb-detail-label">Direcci&oacute;n</span>
  129.             <strong class="emb-detail-value">
  130.                {{ agenda.direccion }}{% if agenda.tipoAgenda and agenda.tipoAgenda.nombre != "Charla Zoom" %}, {{ agenda.comuna }}{% endif %}
  131.             </strong>
  132.          </div>
  133.          {% endif %}
  134.          {% if agenda.colegioParticipantes|length > 0 %}
  135.          <div class="col-12 emb-detail-item">
  136.             <span class="emb-detail-label">Colegios</span>
  137.             <div style="display:flex;flex-direction:column;gap:4px;margin-top:4px">
  138.             {% for cp in agenda.colegioParticipantes %}
  139.                {% if cp.colegio %}
  140.                <div style="display:flex;justify-content:space-between;align-items:center;background:#f8f9fc;border-radius:6px;padding:5px 10px;gap:8px">
  141.                   <span style="font-size:11px;font-weight:600;color:#1a1a2e">{{ cp.colegio.nombre }}</span>
  142.                   <span style="font-size:10px;font-weight:600;color:#6b7280;background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:1px 8px;white-space:nowrap;flex-shrink:0">
  143.                      {{ cp.colegio.dependencia ? cp.colegio.dependencia.nombre : 'Por confirmar' }}
  144.                   </span>
  145.                </div>
  146.                {% endif %}
  147.             {% endfor %}
  148.             </div>
  149.          </div>
  150.          {% endif %}
  151.       </div>
  154.    </div>
  155. </div>
  157. {% endif %}
  158. {% endfor %}
  160. {% if not hay_eventos %}
  161. <div class="text-center py-5 text-muted">
  162.    <i class="la la-calendar-o" style="font-size:3rem;display:block;margin-bottom:12px;opacity:.4"></i>
  163.    No hay actividades abiertas por ahora
  164. </div>
  165. {% endif %}
  167. </div>
  168. </div>
  169. </div>
  171. <nav class="emb-bottom-nav">
  172.    <a href="{{ path('agenda_index_estudiante') }}" class="emb-bottom-nav__item emb-bottom-nav__item--active">
  173.       <i class="la la-calendar"></i>
  174.       <span>Disponibles</span>
  175.    </a>
  176.    <a href="{{ path('agenda_index_estudiante_confirmadas') }}" class="emb-bottom-nav__item">
  177.       <i class="la la-check-circle"></i>
  178.       <span>Confirmadas</span>
  179.    </a>
  180.    <a href="{{ path('agenda_index_estudiante_historicas') }}" class="emb-bottom-nav__item">
  181.       <i class="la la-history"></i>
  182.       <span>Historial</span>
  183.    </a>
  184. </nav>
  186. <style>
  187. .emb-content { padding-bottom: 80px !important; }
  188. .emb-card {
  189.    display: flex; gap: 12px;
  190.    background: #fff;
  191.    border: 1px solid #e8ecf0;
  192.    border-radius: 8px;
  193.    padding: 14px 12px;
  194.    margin-bottom: 6px;
  195. }
  196. .emb-card__date {
  197.    display: flex; flex-direction: column; align-items: center;
  198.    justify-content: flex-start; min-width: 38px; padding-top: 2px;
  199. }
  200. .emb-card__day { font-size: 1.45rem; font-weight: 700; color: #1a1a2e; line-height: 1; }
  201. .emb-card__month { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; color: #74788d; letter-spacing: .5px; }
  202. .emb-card__body { flex: 1; min-width: 0; }
  203. .emb-card__meta { margin-bottom: 3px; }
  204. .emb-badge { font-size: 10px; margin-right: 3px; }
  205. .emb-card__time { font-size: 0.78rem; color: #5867dd; font-weight: 600; }
  206. .emb-card__place { font-size: 0.85rem; color: #333; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  207. .emb-btn { font-size: 0.78rem; padding: 3px 10px; }
  208. .emb-toggle { font-size: 0.75rem; color: #74788d; display: inline-block; margin-top: 6px; cursor: pointer; text-decoration: none; }
  209. .emb-toggle:hover { text-decoration: none; color: #5867dd; }
  210. .emb-toggle__icon { transition: transform .2s; display: inline-block; }
  211. .emb-toggle--open .emb-toggle__icon { transform: rotate(180deg); }
  212. .emb-collapse {
  213.    background: #f8f9fc; border: 1px solid #e8ecf0; border-top: 0;
  214.    border-radius: 0 0 8px 8px; margin-top: -6px; margin-bottom: 6px;
  215. }
  216. .emb-details { padding: 10px 12px; }
  217. .emb-detail-item { padding: 5px 6px; }
  218. .emb-detail-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #74788d; font-weight: 600; }
  219. .emb-detail-value { display: block; font-size: 0.85rem; color: #1a1a2e; }
  220. .emb-bottom-nav {
  221.    position: fixed; bottom: 0; left: 0; right: 0; height: 62px;
  222.    background: #fff; border-top: 1px solid #e2e5ec;
  223.    display: flex; z-index: 1050;
  224.    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  225. }
  226. .emb-bottom-nav__item {
  227.    flex: 1; display: flex; flex-direction: column;
  228.    align-items: center; justify-content: center;
  229.    font-size: 0.62rem; font-weight: 600; color: #74788d;
  230.    text-decoration: none; gap: 2px; transition: color .15s;
  231. }
  232. .emb-bottom-nav__item i { font-size: 1.25rem; }
  233. .emb-bottom-nav__item--active { color: #5867dd; border-top: 2px solid #5867dd; }
  234. .emb-bottom-nav__item:hover { color: #5867dd; text-decoration: none; }
  235. </style>
  237. <script>
  238. function embToggle(id, btn) {
  239.   var panel = document.getElementById(id);
  240.   var open = panel.style.display !== 'none';
  241.   panel.style.display = open ? 'none' : 'block';
  242.   btn.classList.toggle('emb-toggle--open', !open);
  243. }
  244. </script>
  245. {% endblock %}