{% extends 'base.html' %}
{% load static %}
{% block content %}

    <div class="page-wrapper">
        <!-- HEADER MOBILE-->
        <header class="header-mobile d-block d-lg-none">
            <div class="header-mobile__bar">
                <div class="container-fluid">
                    <div class="header-mobile-inner"
                            <a class="logo" href="index.html">
                            <img src="{% static 'images/icon/logo.png' %}" alt="King Dental" />
                            </a>
                            <button class="hamburger hamburger--slider" type="button">
                                <span class="hamburger-box">
                                    <span class="hamburger-inner"></span>
                                </span>
                            </button>
                        
                    </div>
                </div>
            </div>
            <nav class="navbar-mobile">
                <div class="container-fluid">
                    {% if request.user.is_authenticated %}
                        <ul class="navbar-mobile__list list-unstyled">
                           
                            <li>
                                <a href="chart.html">
                                    <i class="fas fa-chart-bar"></i>Patients List</a>
                            </li>
                            
                        </ul>  
                        {% endif %}
                </div>
            </nav>
        </header>
        <!-- END HEADER MOBILE-->

        <!-- MENU SIDEBAR-->
        
            <aside class="menu-sidebar d-none d-lg-block">
                <div class="logo">
                    <a href="#">
                        <img src="{% static 'images/icon/logo.png' %}" alt="King Dental" />
                    </a>
                </div>
                {% if request.user.is_authenticated %}
                    <div class="menu-sidebar__content js-scrollbar1">
                        <nav class="navbar-sidebar">
                            <ul class="list-unstyled navbar__list">
                               
                                <li class="has-sub">
                                    <a class="js-arrow" href="#">
                                        <i class="fas fa-plus"></i>Add new Patient
                                    </a>
                
                                </li> 
                                
                            </ul>
                        </nav>
                    </div>
                {% endif %}
            </aside>
        
        <!-- END MENU SIDEBAR-->









        <!-- PAGE CONTAINER-->
        <div class="page-container">
            <!-- HEADER DESKTOP-->
            <header class="header-desktop">
                <div class="section__content section__content--p30">
                    <div class="container-fluid">
                        <div class="header-wrap">
                            <form class="form-header" action="" method="POST">
                                <input class="au-input au-input--xl" type="text" name="search" placeholder="Search for datas &amp; reports..." />
                                <button class="au-btn--submit" type="submit">
                                    <i class="zmdi zmdi-search"></i>
                                </button>
                            </form>

                            
                            <div class="header-button">
                               
                                
                                {% if request.user.is_authenticated %}
                                    <div class="account-wrap">
                                        <div class="account-item clearfix js-item-menu">
                                            <div class="image">
                                                <img src="{% static 'images/icon/avatar-01.jpg' %}" alt="John Doe" />
                                            </div>
                                            <div class="content">
                                                <a class="js-acc-btn" href="#">{{ request.user.username }}</a>
                                            </div>
                                            <div class="account-dropdown js-dropdown">
                                                <div class="info clearfix">
                                                    <div class="image">
                                                        <a href="#">
                                                            <img src="{% static 'images/icon/avatar-01.jpg' %}" alt="John Doe" />
                                                        </a>
                                                    </div>
                                                    <div class="content">
                                                        <h5 class="name">
                                                            <a href="#">{{ request.user.username }}</a>
                                                        </h5>
                                                        <span class="email">{{ request.user.email }}</span>
                                                    </div>
                                                </div>
                                                
                                                <div class="account-dropdown__footer">
                                                    <a href="{% url 'user_logout' %}">
                                                        <i class="zmdi zmdi-power"></i>Logout</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {%else%}

                                    <div class="account-wrap">
                                        <div class="account-item clearfix">
                                            <a class="zmdi zmdi-account mr-2 " href="{% url 'user_login' %}"> Login</a>
                                        <span> | </span>
                                            <a class="zmdi zmdi-account ml-2" href="{% url 'user_register' %}"> Register</a>    
                                        </div>
                                    </div>
                                {% endif %}
                    



                            </div>
                        </div>

            </header>
            <!-- END HEADER DESKTOP-->








            <!-- MAIN CONTENT-->
            <!-- MAIN CONTENT-->
            {% if request.user.is_authenticated %}
            <div class="main-content">
                <div class="section__content section__content--p30 ">
                    <div class="container-fluid">


                        <div class="col-lg-6">
                            <div class="card">
                                <div class="card-header">
                                     Creating new <strong>Patient</strong>
                                </div>
                                <div class="card-body card-block">
                                    <form action="" method="post" enctype="multipart/form-data" class="form-horizontal">
                                        {% csrf_token %}
                                        <div class="row form-group">
                                            <div class="col col-md-3">
                                                <label for="text-input" class=" form-control-label">Name</label>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                {{form.name}}
                                                <small class="form-text text-muted">Please enter patient's name</small>
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col col-md-3">
                                                <label for="email-input" class=" form-control-label">National ID</label>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                {{form.nationalID}}
                                                <small class="help-block form-text">Please enter patient's National ID</small>
                                            </div>
                                        </div>

                                        
                                        <div class="row form-group">
                                            <div class="col col-md-3">
                                                <label for="textarea-input" class=" form-control-label">Description</label>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                
                                                {{ form.description }}
                                                <small class="help-block form-text">Please enter patient's Description</small>

                                                    </div>
                                                </div>
                                                
                                                <div class="row form-group">
                                                    <div class="col col-md-3">
                                                        <label for="file-input" class=" form-control-label">Patient's Image</label>
                                                    </div>
                                                    <div class="col-12 col-md-9">
                                                        {{form.image}}
                                                    </div>
                                                </div>
                                               
                                                
                                    
                                        <button type="submit" class="btn btn-primary btn-sm">
                                            <i class="fa fa-dot-circle-o"></i> Submit
                                        </button>
                                
                                    </form>

                                    
                                </div>
                                
                            </div>

                        </div>
                        
                    </div>
                </div>
            {% endif %}
        </div>
        <!-- END PAGE CONTAINER-->

    </div>

{% endblock content %}