{% extends 'page.html'%}
{% load static %}
{% block content %}
<div class="row">
<h3>Register</h3>
<div class="row">
<div class="large-8 columns">
    <p>We have closed the online registration for the conference.</p>
    <p>However, you can join the conference through spot registration.</p>
    <div class="reg"> 
        <table>
            <th>Tickets</th>
            <th>Price</th>
            <tr>
                <td>On spot Regular Registration<sup>*</sup></td>
                <td>INR 700</td>
            </tr>
            <tr>
                <td>On spot Corporate Registration</td>
                <td>INR 1200</td>
            </tr>
        </table>
    </div>

    <div class="reg">
        <table>
            <th>Addons</th>
            <th>Price</th>
            <tr>
                <td>Accommodation<sup>#</sup></td>
                <td>INR 750</td>
            </tr>
            <tr>
                <td>T-Shirt</td>
                <td>INR 250</td>
            </tr>
        </table>
    </div>
    
    <div style="margin-left: 10px;">
    <div class="clearfix"></div>
    <h5>Note:</h5>
    <ul>
    <li>* Regular Registrants should bring any one of their college/institute identification cards during the event</li>
    <li># For spot registrations, accommodation will be provided based on the availability. Accommodation will be for 4 days starting from 12th to 15th of December</li>
    </div>
    
    <!-- Modal test -->
    <div id="myModal" class="reveal-modal">
        <ul class="large-grid-2" style="text-align: center">
           <img src="{% static 'img/Front-lg.png' %}"> 
           <img src="{% static 'img/Back-lg.png' %}" width="360px"> 
        </ul>
        <p style="text-align: center">*Colours are for representation purpose and may slightly vary from the original.</p>
        <a class="close-reveal-modal">&#215;</a>
    </div>
</div> 

<div class="large-4 columns">
    <h6><u>T-Shirt Preview</u></h6>
    <div class="row">
        <ul class="large-grid-2">
        <a href="#" data-reveal-id="myModal">
           <img src="{% static 'img/Front-sm.png' %}"> 
           <img src="{% static 'img/Back-sm.png' %}" width="90px"> 
        </a>
        </ul>
    </div>
    <div class="row">
        <h6><u>For entering IIT Campus</u></h6>
        <ul class="large-grid-2">
            If you are willing to join the conference through spot registration, get a copy of <a href="{% static 'docs/ticket.pdf' %}"><b>this ticket</b></a>. You will have to present the ticket in order to clear the security checks at the IIT gate.
        </ul>
    </div>
</div>

</div> <!-- /row -->
</div> <!-- /row -->
<div class="reveal-modal-bg" style="display: none"></div>
{% endblock %}