{%load static%}

<div class="card-body pt-4 ml-20 ">
    <!--begin::Toolbar-->
    <div class="d-flex justify-content-end">
        <div class="dropdown dropdown-inline">
            <a href="#" class="btn btn-clean btn-hover-light-primary btn-sm btn-icon" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="ki ki-bold-more-hor"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                <!--begin::Navigation-->
                <ul class="navi navi-hover py-5">
                    <li class="navi-item">
                        <a href="#" class="navi-link">
                            <span class="navi-icon"><i class="flaticon2-drop"></i></span>
                            <span class="navi-text">گروه جدید</span>
                        </a>
                    </li>
                    <li class="navi-item">
                        <a href="#" class="navi-link">
                            <span class="navi-icon"><i class="flaticon2-list-3"></i></span>
                            <span class="navi-text">مخاطب</span>
                        </a>
                    </li>
                    <li class="navi-item">
                        <a href="#" class="navi-link">
                            <span class="navi-icon"><i class="flaticon2-rocket-1"></i></span>
                            <span class="navi-text">گروه ها</span>
                            <span class="navi-link-badge">
                                <span class="label label-light-primary label-inline font-weight-bold">جدید</span>
                            </span>
                        </a>
                    </li>
                    <li class="navi-item">
                        <a href="#" class="navi-link">
                            <span class="navi-icon"><i class="flaticon2-bell-2"></i></span>
                            <span class="navi-text">تماس ها</span>
                        </a>
                    </li>
                    <li class="navi-item">
                        <a href="#" class="navi-link">
                            <span class="navi-icon"><i class="flaticon2-gear"></i></span>
                            <span class="navi-text">تنظیمات</span>
                        </a>
                    </li>

                    <li class="navi-separator my-3"></li>

                    <li class="navi-item">
                        <a href="#" class="navi-link">
                            <span class="navi-icon"><i class="flaticon2-magnifier-tool"></i></span>
                            <span class="navi-text">راهنما</span>
                        </a>
                    </li>
                    <li class="navi-item">
                        <a href="#" class="navi-link">
                            <span class="navi-icon"><i class="flaticon2-bell-2"></i></span>
                            <span class="navi-text">حریم خصوصی</span>
                            <span class="navi-link-badge">
                                <span class="label label-light-danger label-rounded font-weight-bold">5</span>
                            </span>
                        </a>
                    </li>
                </ul>
                <!--end::Navigation-->
            </div>
        </div>
    </div>
    <!--end::Toolbar-->

    <!--begin::User-->
    <div class="d-flex align-items-center">
        <div class="symbol symbol-60 symbol-xxl-100 mr-5 align-self-start align-self-xxl-center">
            <div class="symbol-label" style="background-image:url(/static/media/users/300_21.jpg)">
            </div>
            <i class="symbol-badge bg-success"></i>
        </div>
        <div>
            <span class="font-weight-bolder font-size-h5 text-dark-75 text-hover-primary">
            {{person.user.first_name }}   {{person.user.last_name }}            </span>
            <div class="text-muted">
                {{person_cultural.sardoshi_categories}}
            </div>
            <!-- <div class="mt-2">
                <a href="#"
                    class="btn btn-sm btn-primary font-weight-bold mr-2 py-2 px-3 px-xxl-5 my-1">چت</a>
                <a href="#"
                    class="btn btn-sm btn-success font-weight-bold py-2 px-3 px-xxl-5 my-1">دنبال
                    کردن</a>
            </div> -->
        </div>
    </div>
    <!--end::User-->

    <!--begin::مخاطب-->
    <div class="py-9">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <span class="font-weight-bold mr-2">پست الکترونیک:</span>
            <a href="#" class="text-muted text-hover-primary">{{person.user.email}}</a>
        </div>
        <div class="d-flex align-items-center justify-content-between mb-2">
            <span class="font-weight-bold mr-2">تلفن:</span>
            <span class="text-muted">{{person_private_info.phone}}</span>
        </div>
        <div class="d-flex align-items-center justify-content-between">
            <span class="font-weight-bold mr-2">کد ملی:</span>
            <span class="text-muted">{{person.national_code}}</span>
        </div>
    </div>
    <!--end::مخاطب-->
   
    <!--begin::Nav-->
    <div class="navi navi-bold navi-hover navi-active navi-link-rounded">
        <div class="navi-item mb-2">
          
        </div>
        <div class="navi-item mb-2">
            <a href="information"class="navi-link py-4 ">
                <span class="navi-icon mr-2">
                    <span class="svg-icon"><!--begin::Svg Icon | path:assets/media/svg/icons/عمومی/User.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                <path d="M12,11 C9.790861,11 8,9.209139 8,7 C8,4.790861 9.790861,3 12,3 C14.209139,3 16,4.790861 16,7 C16,9.209139 14.209139,11 12,11 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                <path d="M3.00065168,20.1992055 C3.38825852,15.4265159 7.26191235,13 11.9833413,13 C16.7712164,13 20.7048837,15.2931929 20.9979143,20.2 C21.0095879,20.3954741 20.9979143,21 20.2466999,21 C16.541124,21 11.0347247,21 3.72750223,21 C3.47671215,21 2.97953825,20.45918 3.00065168,20.1992055 Z" fill="#000000" fill-rule="nonzero"></path>
                            </g>
                        </svg><!--end::Svg Icon--></span> </span>
                <span class="navi-text font-size-lg ">
                    اطلاعات شخصی
                </span>
            </a>
        </div>
        <div class="navi-item mb-2">
            <a href="personaddress" class="navi-link py-4 ">
                <span class="navi-icon mr-2">
                    <span class="svg-icon"><!--begin::Svg Icon | path:assets/media/svg/icons/کد/Compiling.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"></rect>
                                <path d="M2.56066017,10.6819805 L4.68198052,8.56066017 C5.26776695,7.97487373 6.21751442,7.97487373 6.80330086,8.56066017 L8.9246212,10.6819805 C9.51040764,11.267767 9.51040764,12.2175144 8.9246212,12.8033009 L6.80330086,14.9246212 C6.21751442,15.5104076 5.26776695,15.5104076 4.68198052,14.9246212 L2.56066017,12.8033009 C1.97487373,12.2175144 1.97487373,11.267767 2.56066017,10.6819805 Z M14.5606602,10.6819805 L16.6819805,8.56066017 C17.267767,7.97487373 18.2175144,7.97487373 18.8033009,8.56066017 L20.9246212,10.6819805 C21.5104076,11.267767 21.5104076,12.2175144 20.9246212,12.8033009 L18.8033009,14.9246212 C18.2175144,15.5104076 17.267767,15.5104076 16.6819805,14.9246212 L14.5606602,12.8033009 C13.9748737,12.2175144 13.9748737,11.267767 14.5606602,10.6819805 Z" fill="#000000" opacity="0.3"></path>
                                <path d="M8.56066017,16.6819805 L10.6819805,14.5606602 C11.267767,13.9748737 12.2175144,13.9748737 12.8033009,14.5606602 L14.9246212,16.6819805 C15.5104076,17.267767 15.5104076,18.2175144 14.9246212,18.8033009 L12.8033009,20.9246212 C12.2175144,21.5104076 11.267767,21.5104076 10.6819805,20.9246212 L8.56066017,18.8033009 C7.97487373,18.2175144 7.97487373,17.267767 8.56066017,16.6819805 Z M8.56066017,4.68198052 L10.6819805,2.56066017 C11.267767,1.97487373 12.2175144,1.97487373 12.8033009,2.56066017 L14.9246212,4.68198052 C15.5104076,5.26776695 15.5104076,6.21751442 14.9246212,6.80330086 L12.8033009,8.9246212 C12.2175144,9.51040764 11.267767,9.51040764 10.6819805,8.9246212 L8.56066017,6.80330086 C7.97487373,6.21751442 7.97487373,5.26776695 8.56066017,4.68198052 Z" fill="#000000"></path>
                            </g>
                        </svg><!--end::Svg Icon--></span> </span>
                <span class="navi-text font-size-lg">
                    راه‌های ارتباطی
                </span>
            </a>
        </div>
        <div class="navi-item mb-2">
            <a href="other" class="navi-link py-4" data-toggle="tooltip" title="" data-placement="right" data-original-title="به زودی...">
                <span class="navi-icon mr-2">
                    <span class="svg-icon"><!--begin::Svg Icon | path:assets/media/svg/icons/متن/Article.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"></rect>
                                <rect fill="#000000" x="4" y="5" width="16" height="3" rx="1.5">
                                </rect>
                                <path d="M5.5,15 L18.5,15 C19.3284271,15 20,15.6715729 20,16.5 C20,17.3284271 19.3284271,18 18.5,18 L5.5,18 C4.67157288,18 4,17.3284271 4,16.5 C4,15.6715729 4.67157288,15 5.5,15 Z M5.5,10 L12.5,10 C13.3284271,10 14,10.6715729 14,11.5 C14,12.3284271 13.3284271,13 12.5,13 L5.5,13 C4.67157288,13 4,12.3284271 4,11.5 C4,10.6715729 4.67157288,10 5.5,10 Z" fill="#000000" opacity="0.3"></path>
                            </g>
                        </svg><!--end::Svg Icon--></span> </span>
                <span class="navi-text">
                      اطلاعات تکمیلی 
                </span>
            </a>
        </div>
        <div class="navi-item mb-2">
            <a href="custom/apps/profile/profile-1/change-password.html" class="navi-link py-4 ">
                <span class="navi-icon mr-2">
                    <span class="svg-icon"><!--begin::Svg Icon | path:assets/media/svg/icons/ارتباطات/Shield-user.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"></rect>
                                <path d="M4,4 L11.6314229,2.5691082 C11.8750185,2.52343403 12.1249815,2.52343403 12.3685771,2.5691082 L20,4 L20,13.2830094 C20,16.2173861 18.4883464,18.9447835 16,20.5 L12.5299989,22.6687507 C12.2057287,22.8714196 11.7942713,22.8714196 11.4700011,22.6687507 L8,20.5 C5.51165358,18.9447835 4,16.2173861 4,13.2830094 L4,4 Z" fill="#000000" opacity="0.3"></path>
                                <path d="M12,11 C10.8954305,11 10,10.1045695 10,9 C10,7.8954305 10.8954305,7 12,7 C13.1045695,7 14,7.8954305 14,9 C14,10.1045695 13.1045695,11 12,11 Z" fill="#000000" opacity="0.3"></path>
                                <path d="M7.00036205,16.4995035 C7.21569918,13.5165724 9.36772908,12 11.9907452,12 C14.6506758,12 16.8360465,13.4332455 16.9988413,16.5 C17.0053266,16.6221713 16.9988413,17 16.5815,17 C14.5228466,17 11.463736,17 7.4041679,17 C7.26484009,17 6.98863236,16.6619875 7.00036205,16.4995035 Z" fill="#000000" opacity="0.3"></path>
                            </g>
                        </svg><!--end::Svg Icon--></span> </span>
                <span class="navi-text font-size-lg">
                    تغییر کلمه عبور
                </span>
                <span class="navi-label">
                    <span class="label label-light-danger label-rounded font-weight-bold">5</span>
                </span>
            </a>
        </div>
        <div class="navi-item mb-2">
            <a href="custom/apps/profile/profile-1/email-settings.html" class="navi-link py-4 ">
                <span class="navi-icon mr-2">
                    <span class="svg-icon"><!--begin::Svg Icon | path:assets/media/svg/icons/ارتباطات/Mail-opened.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"></rect>
                                <path d="M6,2 L18,2 C18.5522847,2 19,2.44771525 19,3 L19,12 C19,12.5522847 18.5522847,13 18,13 L6,13 C5.44771525,13 5,12.5522847 5,12 L5,3 C5,2.44771525 5.44771525,2 6,2 Z M7.5,5 C7.22385763,5 7,5.22385763 7,5.5 C7,5.77614237 7.22385763,6 7.5,6 L13.5,6 C13.7761424,6 14,5.77614237 14,5.5 C14,5.22385763 13.7761424,5 13.5,5 L7.5,5 Z M7.5,7 C7.22385763,7 7,7.22385763 7,7.5 C7,7.77614237 7.22385763,8 7.5,8 L10.5,8 C10.7761424,8 11,7.77614237 11,7.5 C11,7.22385763 10.7761424,7 10.5,7 L7.5,7 Z" fill="#000000" opacity="0.3"></path>
                                <path d="M3.79274528,6.57253826 L12,12.5 L20.2072547,6.57253826 C20.4311176,6.4108595 20.7436609,6.46126971 20.9053396,6.68513259 C20.9668779,6.77033951 21,6.87277228 21,6.97787787 L21,17 C21,18.1045695 20.1045695,19 19,19 L5,19 C3.8954305,19 3,18.1045695 3,17 L3,6.97787787 C3,6.70173549 3.22385763,6.47787787 3.5,6.47787787 C3.60510559,6.47787787 3.70753836,6.51099993 3.79274528,6.57253826 Z" fill="#000000"></path>
                            </g>
                        </svg><!--end::Svg Icon--></span> </span>
                <span class="navi-text font-size-lg">
                    تنظیمات پست الکترونیکی
                </span>
            </a>
        </div>
        <div class="navi-item mb-2">
            <a href="#" class="navi-link py-4" data-toggle="tooltip" title="" data-placement="right" data-original-title="به زودی...">
                <span class="navi-icon mr-2">
                    <span class="svg-icon"><!--begin::Svg Icon | path:assets/media/svg/icons/چیدمان/چیدمان-top-panel-6.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <rect x="0" y="0" width="24" height="24"></rect>
                                <rect fill="#000000" x="2" y="5" width="19" height="4" rx="1">
                                </rect>
                                <rect fill="#000000" opacity="0.3" x="2" y="11" width="19" height="10" rx="1"></rect>
                            </g>
                        </svg><!--end::Svg Icon--></span> </span>
                <span class="navi-text font-size-lg">
                    ذخیره کارت اعتباری
                </span>
            </a>
        </div>
        <div class="navi-item mb-2">
            <a href="#" class="navi-link py-4" data-toggle="tooltip" title="" data-placement="right" data-original-title="به زودی...">
                <span class="navi-icon mr-2">
                    <span class="svg-icon"><!--begin::Svg Icon | path:assets/media/svg/icons/پرونده ها/فایل.svg--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon points="0 0 24 0 24 24 0 24"></polygon>
                                <path d="M5.85714286,2 L13.7364114,2 C14.0910962,2 14.4343066,2.12568431 14.7051108,2.35473959 L19.4686994,6.3839416 C19.8056532,6.66894833 20,7.08787823 20,7.52920201 L20,20.0833333 C20,21.8738751 19.9795521,22 18.1428571,22 L5.85714286,22 C4.02044787,22 4,21.8738751 4,20.0833333 L4,3.91666667 C4,2.12612489 4.02044787,2 5.85714286,2 Z" fill="#000000" fill-rule="nonzero" opacity="0.3"></path>
                                <rect fill="#000000" x="6" y="11" width="9" height="2" rx="1">
                                </rect>
                                <rect fill="#000000" x="6" y="15" width="5" height="2" rx="1">
                                </rect>
                            </g>
                        </svg><!--end::Svg Icon--></span> </span>
                <span class="navi-text font-size-lg">اطلاعات مالیاتی</span>
                <span class="navi-label">
                    <span class="label label-light-primary label-inline font-weight-bold">جدید</span>
                </span>
            </a>
        </div>
        
    </div>
    
    <!--end::Nav-->
</div>