{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'Ferdowsi_Cal/css/gregorian_style.css' %}">
<style>
    *{{
    --container_color:{{color}}
    }}
</style>

<script>
var names = []
    var contents = []
    var days = []
    var ids = []
    var ev_users = []
    {% for eve in events %}
        names.push("{{eve.name|safe}}")
        contents.push("{{eve.content|safe}}")
        days.push("{{eve.day|safe}}")
        ids.push("{{eve.id|safe}}")
        ev_users.push("{{eve.ev_users|safe}}")
    {% endfor %}
</script>
<script src="{% static 'Ferdowsi_Cal/js/my_jquery.js' %}"></script>
<script src="{% static 'Ferdowsi_Cal/js/gregorian_script_user.js' %}"></script>


{% with weekDays="Mon Tue Wed Thu Fri Sat Sun" %}
<div id="container">
    <div class="calendar_head">
        <a class="leftArrow"  onclick="prev_month_user()">&#10094;</a>
        <div id="YearMonth">
            <h2>{{month}}</h2>
            <h3>{{year}}</h3>
        </div>
        <a class="rightArrow"  onclick="next_month_user()">&#10095;</a>
    </div>
    <hr>

    <table class = "gregorian_calendar">
        <thead>
            <tr>
                {% for i in weekDays.split %}
                    <th>{{i}}</th>
                {% endfor %}
            </tr>

        </thead>
        <tbody id="myTbody">
        {% spaceless %}
           {% for i in cal %}
            <tr>
                {% for j in i %}
                    <td style="{% if j == today %}border:solid blue;{% endif %}">
                        {% if j != 0 %}
                        <a>{{ j }}</a>
                        {% endif %}
                    </td>
                {% endfor %}
            </tr>
            {% endfor %}
        {% endspaceless %}
        </tbody>
    </table>


    <div id="addEventDiv" style="display:none">
        <div id="eventPlus">
            <div id="showEvent">
            </div>
            <a onclick="closeDiv()"><span>close</span></a>
        </div>
    </div>
</div>
{% endwith %}
