{% extends "class/base.html" %} {% load static %} {% block title %} Classroom {% endblock %}
{% block style %}
.card{
border-radius: 4px;
background: #fff;
box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform
cubic-bezier(.155,1.105,.295,1.12);
padding: 14px 80px 18px 36px;
cursor: pointer;
}

.card:hover{
transform: scale(1.05);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.card img{
position: absolute;
top: 20px;
right: 15px;
max-height: 120px;
}

.card-1{
background-image: url(https://ionicframework.com/img/getting-started/ionic-native-card.png);
background-repeat: no-repeat;
background-position: right;
background-size: 80px;
}
.card h3{
font-weight: 600;
}

{% endblock %}
{% block body %}

<!-- <img src="{% static 'images/create.svg' %}" class="mx-auto d-block" style="height: 450px; width: 60%;"> -->

<div class="container text-center ">

    {% if user.is_authenticated %}
    {% if messages %}
    <ul class="messages">
        {% for msg in messages %}
        <p class="text-center">
        <div class="alert alert-{{msg.level_tag}} alert-dismissible text-center" role="alert">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            {{msg.message}}
        </div>
        </p>
        {% endfor %}
    </ul>
    {% endif %}

    <div class="modal-body row">
        <div class="col-md-6 mtop ">
            <h2 class="botn3">Welcome to the alternative Learning</h2>
            <p class="botn3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua.</p>
            <div class="text-center margin_y">
                <button type="button" class="btn" onclick="window.location.href='/create'">
                    <span>Create a Class</span>
                </button>
                <button type="button" class="btn botn2" onclick="window.location.href='/join'">
                    <span>Join a Class</span>
                </button>
            </div>
        </div>
        <div class="col-md-6 ">
            <!-- Your second column here -->
            <img src="{% static 'images/undraw_true_friends_c94g.svg' %}" class="mx-auto d-block"
                style="height: 400px; width: 100%;">
        </div>


        {% if object_list %}
        <div class="mb-4 display-4">
            <h4><mark><i class="fa fa-cloud"
                        style="font-size:36px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i> Classes so far
                    you're connected with : </mark></h4>
        </div>

        <div class="class_card row">

            {% for obj in object_list %}
            <div class="col-md-4 d-flex align-items-stretch mt-5">
                <div class="card card-1">
                    <h3>{{ obj }}</h3>
                    <p>A curated set of ES5/ES6/TypeScript wrappers for plugins to easily add any native functionality
                        to your Ionic apps.</p>
                    <h6>Instructor : {{ obj.creator }}</h6>
                </div>
            </div>
            {% endfor %}
        </div>
        <!-- Students in {{ obj }} class:- -->

        <!-- {% for user in obj.user_profile.all %}
                <div class="text-success">
                    {{ user }}
                </div>
                {% endfor %} -->
        {% endif %}
    </div>
    <!-- <h2>You name is: {{ user.username }}</h2> -->
    <!-- <button class="m-5 btn inner bordered " onclick="window.location.href='/create'"><i class="fa fa-plus"></i> Create Class</button>
    <button class="btn inner m-5 bordered " onclick="window.location.href='/join'"><i class="fa fa-plus"></i> Join Class</button>  -->
    {% else %}
    <h2>You are not logged in.</h2>
    <p> <u><a href="/accounts/login">Login</a></u> to get full access to the classroom.</p>
    <img src="{% static 'images/undraw_refreshing_beverage_td3r.svg' %}" class="img-fluid"
        style="height: 250px; width: 100%;"> {% endif %}
</div>
{% endblock %}