{% extends "layouts/organization.html.twig" %}
{% block bodyClass %}tpl-generic-page-2-cols{% endblock %}
{% block siteHeader %}
{% include 'organisms/organization-header.html.twig' %}
{% endblock %}
{% block pageHeader %}
<usc-page-header>
<template v-slot:breadcrumb>
<ol class="at-breadcrumb">
<li class="breadcrumb-item"><a href="{{ path('center-calendar') }}">Calendarios</a></li>
</ol>
</template>
<h1 class="at-title">Calendario de TFG/TFM</h1>
</usc-page-header>
{% endblock %}
{% block pageContent %}
<article class="generic-page-wrapper">
<div class="generic-page-left">
<div class="ml-filters-group">
<usc-dropdown-filter
label="Curso"
:initial-value="{value: 'Curso 2019-2020'}"
>
<template v-slot:default="slotProps">
<li>
<a href="">Curso 2020-2021</a>
</li>
<li>
<a href="">Curso 2019-2020</a>
</li>
<li>
<a href="">Curso 2018-2019</a>
</li>
</template>
</usc-dropdown-filter>
</div>
<div class="js-ajax-container has-margin-top">
<div class="at-text">
<h2 class="at-title is-3">Calendarios de TFG</h2>
</div>
<usc-accordion>
<usc-accordion-item :is-open="false">
<template v-slot:header>Grao en Bioloxía</template>
<table class="ml-table is-primary has-align-top">
<thead>
<tr>
<th>1º prazo</th>
<th>Data inicio</th>
<th>Data fin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solicitude</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
<tr>
<td>Defensa</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
</tbody>
<thead>
<tr>
<th>2º prazo</th>
<th>Data inicio</th>
<th>Data fin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solicitude</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
<tr>
<td>Defensa</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
</tbody>
</table>
</usc-accordion-item>
<usc-accordion-item :is-open="false">
<template v-slot:header>Dobre grao en Bioloxía e Química</template>
<table class="ml-table is-primary has-align-top">
<thead>
<tr>
<th>1º prazo</th>
<th>Data inicio</th>
<th>Data fin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solicitude</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
<tr>
<td>Defensa</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
</tbody>
<thead>
<tr>
<th>2º prazo</th>
<th>Data inicio</th>
<th>Data fin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solicitude</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
<tr>
<td>Defensa</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
</tbody>
</table>
</usc-accordion-item>
</usc-accordion>
<div class="at-text">
<h2 class="at-title is-3">Calendario de TFM</h2>
</div>
<usc-accordion>
<usc-accordion-item :is-open="false">
<template v-slot:header>Máster en Biodiversidade terrestre</template>
<table class="ml-table is-primary has-align-top">
<thead>
<tr>
<th>1º prazo</th>
<th>Data inicio</th>
<th>Data fin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solicitude</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
<tr>
<td>Defensa</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
</tbody>
<thead>
<tr>
<th>2º prazo</th>
<th>Data inicio</th>
<th>Data fin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solicitude</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
<tr>
<td>Defensa</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
</tbody>
</table>
</usc-accordion-item>
<usc-accordion-item :is-open="false">
<template v-slot:header>Máster en Acuicultura</template>
<table class="ml-table is-primary has-align-top">
<thead>
<tr>
<th>1º prazo</th>
<th>Data inicio</th>
<th>Data fin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solicitude</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
<tr>
<td>Defensa</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
</tbody>
<thead>
<tr>
<th>2º prazo</th>
<th>Data inicio</th>
<th>Data fin</th>
</tr>
</thead>
<tbody>
<tr>
<td>Solicitude</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
<tr>
<td>Defensa</td>
<td>00/00/0000</td>
<td>00/00/0000</td>
</tr>
</tbody>
</table>
</usc-accordion-item>
</usc-accordion>
</div>
</div>
<div class="generic-page-right">
<div class="at-text">
<h2 class="at-title is-4">Información xenérica</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum
ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra eros quis ex malesuada
pellentesque. Suspendisse mauris mauris, ultricies id egestas ac, consectetur a tortor. Vestibulum
ac convallis lectus. Proin in nibh imperdiet, iaculis dui in, aliquet augue.</p>
</div>
<button class="at-button js-load-ajax">
Cargar ajax
</button>
</div>
</article>
{% endblock %}
{% block siteFooter %}
{% include 'organisms/site-footer.html.twig' %}
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function () {
var ajaxContent =
'<div id="ajax-app">'+
'<h2 class="at-title is-3">Contido cargado por ajax</h2><usc-accordion><usc-accordion-item><template v-slot:header>Proba</template>Compoñente cargado por ajax</usc-accordion-item></usc-accordion>'+
'</div>';
$('.js-load-ajax').on('click', function (event) {
$('.js-ajax-container').html(ajaxContent);
window.uscUi.render('#ajax-app');
});
});
</script>
{% endblock %}