{% extends 'base-dashboard.html' %}

{% block content %}

<div id="main-content" class="d-flex flex-xxl-row">
    <div id="column1">
        <div id="classrooms" class="m-4 pb-4">
            <h2>Recent Classrooms<a href="{% url 'student_info:classroomForm' %}"><i class="fas fa-plus fs-4 ps-3"></i></a></h2>
            <div class="classrooms-grid mt-4 d-flex flex-lg-row" style="column-gap: 20px;">
                <div class="card" style="height: 100px;">
                    <div class="card-body">
                        <div class="d-flex flex-xxl-row" style="column-gap: 10px;">
                            <div>
                                <img src="https://img.icons8.com/plasticine/64/000000/1-circle.png" />
                            </div>
                            <div>
                                <h5 class="card-title">Classroom 1</h5>
                                <p class="card-text">Grade: 1st</p>
                            </div>
                            <button type="button" class="btn btn-primary" style="height: 40px;">View</button>
                        </div>
                    </div>
                </div>
                <div class="card" style="height: 100px;">
                    <div class="card-body">
                        <div class="d-flex flex-xxl-row" style="column-gap: 10px;">
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64"
                                    viewBox="0 0 172 172" style=" fill:#000000;">
                                    <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1"
                                        stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"
                                        stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none"
                                        font-size="none" text-anchor="none" style="mix-blend-mode: normal">
                                        <path d="M0,172v-172h172v172z" fill="none"></path>
                                        <g>
                                            <path
                                                d="M85.96388,25.83612c-33.24754,0 -60.2,26.95246 -60.2,60.2c0,33.24754 26.95246,60.2 60.2,60.2c33.24754,0 60.2,-26.95246 60.2,-60.2c0,-33.24754 -26.95246,-60.2 -60.2,-60.2z"
                                                fill="#f1c40f"></path>
                                            <path
                                                d="M85.96388,34.43612c-28.49789,0 -51.6,23.10211 -51.6,51.6c0,28.49789 23.10211,51.6 51.6,51.6c28.49789,0 51.6,-23.10211 51.6,-51.6c0,-28.49789 -23.10211,-51.6 -51.6,-51.6z"
                                                fill="#fefdef"></path>
                                            <path
                                                d="M85.96388,147.95612c-34.14372,0 -61.92,-27.77628 -61.92,-61.92c0,-34.14372 27.77628,-61.92 61.92,-61.92c34.14372,0 61.92,27.77628 61.92,61.92c0,34.14372 -27.77628,61.92 -61.92,61.92zM85.96388,27.55612c-32.24656,0 -58.48,26.23344 -58.48,58.48c0,32.24656 26.23344,58.48 58.48,58.48c32.24656,0 58.48,-26.23344 58.48,-58.48c0,-32.24656 -26.23344,-58.48 -58.48,-58.48z"
                                                fill="#1f212b"></path>
                                            <path
                                                d="M86,137.6c-28.45224,0 -51.6,-23.14776 -51.6,-51.6c0,-28.45224 23.14776,-51.6 51.6,-51.6c5.6588,0 11.2488,0.92536 16.61692,2.75028c0.44892,0.15308 0.68972,0.64156 0.53836,1.0922c-0.15136,0.45064 -0.63468,0.688 -1.0922,0.53836c-5.18924,-1.76472 -10.59348,-2.66084 -16.06308,-2.66084c-27.50452,0 -49.88,22.3772 -49.88,49.88c0,27.5028 22.37548,49.88 49.88,49.88c27.50452,0 49.88,-22.3772 49.88,-49.88c0,-14.29836 -6.16276,-27.93452 -16.90932,-37.41344c-0.35604,-0.31476 -0.39044,-0.85828 -0.07568,-1.21432c0.31476,-0.35432 0.86,-0.38872 1.21432,-0.07568c11.11464,9.80572 17.49068,23.91144 17.49068,38.70344c0,28.45224 -23.14776,51.6 -51.6,51.6z"
                                                fill="#1f212b"></path>
                                            <path
                                                d="M110.94,42.67836c-0.14276,0 -0.28896,-0.03612 -0.42312,-0.11008c-1.11972,-0.63468 -2.25836,-1.22292 -3.38152,-1.74924c-0.43,-0.20124 -0.61576,-0.7138 -0.41452,-1.1438c0.20124,-0.43 0.7138,-0.61576 1.1438,-0.41452c1.16272,0.54524 2.34092,1.15412 3.49848,1.80944c0.41452,0.23564 0.559,0.75852 0.32508,1.17304c-0.15824,0.27864 -0.44892,0.43516 -0.7482,0.43516zM116.1,46.01688c-0.17716,0 -0.35604,-0.05504 -0.51084,-0.16856c-0.55556,-0.41108 -1.11456,-0.81528 -1.68904,-1.20056c-0.39388,-0.26488 -0.4988,-0.7998 -0.2322,-1.19368c0.26316,-0.39388 0.80152,-0.4988 1.19368,-0.23392c0.5934,0.39904 1.17476,0.82044 1.75096,1.24528c0.38184,0.28208 0.46268,0.82216 0.1806,1.20228c-0.17028,0.22876 -0.43,0.34916 -0.69316,0.34916zM72.24,108.36172v-6.3984c0,-2.02272 0.77228,-3.97836 2.31168,-5.87036c1.54112,-1.892 3.41592,-3.6292 5.61752,-5.2116l6.60136,-4.68528c2.24632,-1.5824 4.15552,-3.37464 5.7276,-5.37844c1.57208,-2.00036 2.35812,-4.05748 2.35812,-6.16964c0,-2.28588 -0.79808,-4.31204 -2.3908,-6.0716c-1.59444,-1.75956 -3.82872,-2.63848 -6.70456,-2.63848c-2.4252,0 -4.39116,0.67596 -5.89616,2.02272c-1.505,1.34676 -2.25664,3.28348 -2.25664,5.80328c0,0.48676 -0.21328,0.90644 -0.63812,1.26248c-0.42484,0.35432 -0.99588,0.52976 -1.7114,0.52976c-1.3416,0 -2.01412,-0.89956 -2.01412,-2.7004c0,-3.16136 1.21088,-5.77404 3.63436,-7.83976c2.42348,-2.06228 5.4266,-3.096 9.01624,-3.096c3.85796,0 7.05372,1.20228 9.589,3.60856c2.53356,2.40628 3.80292,5.40252 3.80292,8.98872c0,2.19988 -0.56072,4.31204 -1.68216,6.33476c-1.12144,2.02272 -2.5112,3.73928 -4.16928,5.14968c-1.65808,1.40696 -3.47612,2.83628 -5.44896,4.28796l-5.45756,3.827c-1.66152,1.1008 -3.053,2.34436 -4.17444,3.72896c-1.12144,1.3846 -1.68388,2.7606 -1.68388,4.12456v4.09188h21.47248c0.4472,0 0.82904,0.1978 1.14208,0.5934c0.3182,0.39388 0.47472,0.85484 0.47472,1.38288c0,0.52632 -0.1548,1.00104 -0.46956,1.41556c-0.31304,0.41796 -0.69316,0.62608 -1.13692,0.62608h-23.83748c-0.4902,0 -0.95976,-0.16512 -1.40524,-0.49364c-0.44892,-0.33024 -0.6708,-0.74132 -0.6708,-1.22464z"
                                                fill="#1f212b"></path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                            <div>
                                <h5 class="card-title">Classroom 2</h5>
                                <p class="card-text">Grade: Pre-K</p>
                            </div>
                            <button type="button" class="btn btn-primary" style="height: 40px;">View</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="students" class="m-4 pb-4">
            <h2>Recent Student Scores<a href="{% url 'student_info:studentForm' %}"><i class="fas fa-plus fs-4 ps-3"></i></a></h2>
            <div class="students-grid mt-4 d-flex flex-lg-row" style="column-gap: 20px;">
                <div class="card" style="height: 100px;">
                    <div class="card-body">
                        <div class="d-flex flex-xxl-row" style="column-gap: 10px;">
                            <div>
                                <img src="https://img.icons8.com/plasticine/64/000000/1-circle.png" />
                            </div>
                            <div>
                                <h5 class="card-title">Student 1 Name</h5>
                                <p class="card-text">Grade: 1st</p>
                            </div>
                            <button type="button" class="btn btn-primary" style="height: 40px;">View</button>
                        </div>
                    </div>
                </div>
                <div class="card" style="height: 100px;">
                    <div class="card-body">
                        <div class="d-flex flex-xxl-row" style="column-gap: 10px;">
                            <div>
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64"
                                    viewBox="0 0 172 172" style=" fill:#000000;">
                                    <g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1"
                                        stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10"
                                        stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none"
                                        font-size="none" text-anchor="none" style="mix-blend-mode: normal">
                                        <path d="M0,172v-172h172v172z" fill="none"></path>
                                        <g>
                                            <path
                                                d="M85.96388,25.83612c-33.24754,0 -60.2,26.95246 -60.2,60.2c0,33.24754 26.95246,60.2 60.2,60.2c33.24754,0 60.2,-26.95246 60.2,-60.2c0,-33.24754 -26.95246,-60.2 -60.2,-60.2z"
                                                fill="#f1c40f"></path>
                                            <path
                                                d="M85.96388,34.43612c-28.49789,0 -51.6,23.10211 -51.6,51.6c0,28.49789 23.10211,51.6 51.6,51.6c28.49789,0 51.6,-23.10211 51.6,-51.6c0,-28.49789 -23.10211,-51.6 -51.6,-51.6z"
                                                fill="#fefdef"></path>
                                            <path
                                                d="M85.96388,147.95612c-34.14372,0 -61.92,-27.77628 -61.92,-61.92c0,-34.14372 27.77628,-61.92 61.92,-61.92c34.14372,0 61.92,27.77628 61.92,61.92c0,34.14372 -27.77628,61.92 -61.92,61.92zM85.96388,27.55612c-32.24656,0 -58.48,26.23344 -58.48,58.48c0,32.24656 26.23344,58.48 58.48,58.48c32.24656,0 58.48,-26.23344 58.48,-58.48c0,-32.24656 -26.23344,-58.48 -58.48,-58.48z"
                                                fill="#1f212b"></path>
                                            <path
                                                d="M86,137.6c-28.45224,0 -51.6,-23.14776 -51.6,-51.6c0,-28.45224 23.14776,-51.6 51.6,-51.6c5.6588,0 11.2488,0.92536 16.61692,2.75028c0.44892,0.15308 0.68972,0.64156 0.53836,1.0922c-0.15136,0.45064 -0.63468,0.688 -1.0922,0.53836c-5.18924,-1.76472 -10.59348,-2.66084 -16.06308,-2.66084c-27.50452,0 -49.88,22.3772 -49.88,49.88c0,27.5028 22.37548,49.88 49.88,49.88c27.50452,0 49.88,-22.3772 49.88,-49.88c0,-14.29836 -6.16276,-27.93452 -16.90932,-37.41344c-0.35604,-0.31476 -0.39044,-0.85828 -0.07568,-1.21432c0.31476,-0.35432 0.86,-0.38872 1.21432,-0.07568c11.11464,9.80572 17.49068,23.91144 17.49068,38.70344c0,28.45224 -23.14776,51.6 -51.6,51.6z"
                                                fill="#1f212b"></path>
                                            <path
                                                d="M110.94,42.67836c-0.14276,0 -0.28896,-0.03612 -0.42312,-0.11008c-1.11972,-0.63468 -2.25836,-1.22292 -3.38152,-1.74924c-0.43,-0.20124 -0.61576,-0.7138 -0.41452,-1.1438c0.20124,-0.43 0.7138,-0.61576 1.1438,-0.41452c1.16272,0.54524 2.34092,1.15412 3.49848,1.80944c0.41452,0.23564 0.559,0.75852 0.32508,1.17304c-0.15824,0.27864 -0.44892,0.43516 -0.7482,0.43516zM116.1,46.01688c-0.17716,0 -0.35604,-0.05504 -0.51084,-0.16856c-0.55556,-0.41108 -1.11456,-0.81528 -1.68904,-1.20056c-0.39388,-0.26488 -0.4988,-0.7998 -0.2322,-1.19368c0.26316,-0.39388 0.80152,-0.4988 1.19368,-0.23392c0.5934,0.39904 1.17476,0.82044 1.75096,1.24528c0.38184,0.28208 0.46268,0.82216 0.1806,1.20228c-0.17028,0.22876 -0.43,0.34916 -0.69316,0.34916zM72.24,108.36172v-6.3984c0,-2.02272 0.77228,-3.97836 2.31168,-5.87036c1.54112,-1.892 3.41592,-3.6292 5.61752,-5.2116l6.60136,-4.68528c2.24632,-1.5824 4.15552,-3.37464 5.7276,-5.37844c1.57208,-2.00036 2.35812,-4.05748 2.35812,-6.16964c0,-2.28588 -0.79808,-4.31204 -2.3908,-6.0716c-1.59444,-1.75956 -3.82872,-2.63848 -6.70456,-2.63848c-2.4252,0 -4.39116,0.67596 -5.89616,2.02272c-1.505,1.34676 -2.25664,3.28348 -2.25664,5.80328c0,0.48676 -0.21328,0.90644 -0.63812,1.26248c-0.42484,0.35432 -0.99588,0.52976 -1.7114,0.52976c-1.3416,0 -2.01412,-0.89956 -2.01412,-2.7004c0,-3.16136 1.21088,-5.77404 3.63436,-7.83976c2.42348,-2.06228 5.4266,-3.096 9.01624,-3.096c3.85796,0 7.05372,1.20228 9.589,3.60856c2.53356,2.40628 3.80292,5.40252 3.80292,8.98872c0,2.19988 -0.56072,4.31204 -1.68216,6.33476c-1.12144,2.02272 -2.5112,3.73928 -4.16928,5.14968c-1.65808,1.40696 -3.47612,2.83628 -5.44896,4.28796l-5.45756,3.827c-1.66152,1.1008 -3.053,2.34436 -4.17444,3.72896c-1.12144,1.3846 -1.68388,2.7606 -1.68388,4.12456v4.09188h21.47248c0.4472,0 0.82904,0.1978 1.14208,0.5934c0.3182,0.39388 0.47472,0.85484 0.47472,1.38288c0,0.52632 -0.1548,1.00104 -0.46956,1.41556c-0.31304,0.41796 -0.69316,0.62608 -1.13692,0.62608h-23.83748c-0.4902,0 -0.95976,-0.16512 -1.40524,-0.49364c-0.44892,-0.33024 -0.6708,-0.74132 -0.6708,-1.22464z"
                                                fill="#1f212b"></path>
                                        </g>
                                    </g>
                                </svg>
                            </div>
                            <div>
                                <h5 class="card-title">Student 2 Name</h5>
                                <p class="card-text">Grade: Pre-K</p>
                            </div>
                            <button type="button" class="btn btn-primary" style="height: 40px;">View</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tests" class="m-4 pb-4">
            <h2>Recent Tests Taken</h2>
            <div class="tests-grid mt-4 d-flex flex-lg-row" style="column-gap: 20px;">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Pre-Reading Skills Screener</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <button type="button" class="btn btn-primary">View</button>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">DRESS Screening Test</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the card's content.</p>
                        <button type="button" class="btn btn-primary">View</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column2">
        <div id-"overall-analysis" class="m-4 pb-4" style="max-width: 550px;"
            class="d-flex flex-column justify-content-center align-content-center">
            <h2>Overall Student Readiness</h2>
            <div class="card">
                <div class="card-body m-2 w-auto">
                    <img src="https://i0.wp.com/cssscript.com/wp-content/uploads/2019/11/pie-donut-ring-chart-rpie.jpg?fit=487%2C394&ssl=1"
                        alt="Pie Chart">
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock content %}