{#    <div class="bg-white histories-modal d-none px-5 pt-4 pb-5" id="modal-histories">#}
{#        <div class="h-100 w-100 overflow-hidden">#}
{#            <div class="header d-flex flex-column pl-2 mb-5">#}
{#                <div class="slider-icons-group active ml-auto" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal()">#}
{#                    <div class="slider-icons">#}
{#                        <i class="fal fa-times text-white"></i>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="title mt-3">#}
{#                    <div class="">#}
{#                        #}{#                            <i class="fal fa-tasks"></i>#}
{#                        <i class="fal fa-history font-800" style="color: #1d446b; font-weight: 800;"  ></i>#}
{#                        <span class="ml-3 text-secondary">Campaign history</span>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="body-form mt-2 h-100 histories" style="overflow-y: scroll;">#}
{#                <div class="w-100 px-2 py-3 history-teaser cursor-pointer" style="border-left: 7px solid #7FEF00; background-color: rgba(127, 239, 0, .06)" @click="showViewHistory">#}
{#                    <div class="d-flex justify-content-between">#}
{#                        <span class="font-500 text-success">Current version</span>#}
{#                        <span class="font-italic ">from</span>#}
{#                        <span class="font-italic font-600 text-success">19/02/2020</span>#}
{#                    </div>#}
{#                    <div class="d-flex justify-content-between mt-1">#}
{#                        <small class="font-italic text-success">Modify</small>#}
{#                        <span>by</span>#}
{#                        <span class="font-600 text-primary">Test. B</span>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                    <div class="d-flex justify-content-between">#}
{#                        <span class="font-500">version 11</span>#}
{#                        <span class="font-italic">from</span>#}
{#                        <span class="font-italic font-600">19/02/2020</span>#}
{#                    </div>#}
{#                    <div class="d-flex justify-content-between mt-1">#}
{#                        <small class="font-italic">Modify</small>#}
{#                        <span>by</span>#}
{#                        <span class="font-600">Test. B</span>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                    <div class="d-flex justify-content-between">#}
{#                        <span class="font-500">version 11</span>#}
{#                        <span class="font-italic">from</span>#}
{#                        <span class="font-italic font-600">19/02/2020</span>#}
{#                    </div>#}
{#                    <div class="d-flex justify-content-between mt-1">#}
{#                        <small class="font-italic">Modify</small>#}
{#                        <span>by</span>#}
{#                        <span class="font-600">Test. B</span>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                    <div class="d-flex justify-content-between">#}
{#                        <span class="font-500">version 11</span>#}
{#                        <span class="font-italic">from</span>#}
{#                        <span class="font-italic font-600">19/02/2020</span>#}
{#                    </div>#}
{#                    <div class="d-flex justify-content-between mt-1">#}
{#                        <small class="font-italic">Modify</small>#}
{#                        <span>by</span>#}
{#                        <span class="font-600">Test. B</span>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                    <div class="d-flex justify-content-between">#}
{#                        <span class="font-500">version 11</span>#}
{#                        <span class="font-italic">from</span>#}
{#                        <span class="font-italic font-600">19/02/2020</span>#}
{#                    </div>#}
{#                    <div class="d-flex justify-content-between mt-1">#}
{#                        <small class="font-italic">Modify</small>#}
{#                        <span>by</span>#}
{#                        <span class="font-600">Test. B</span>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="w-100 px-2 py-3 mt-1 history-teaser cursor-pointer" style="border-left: 7px solid rgb(181, 181, 181); background-color: rgba(181, 181, 181, .06)" @click="showViewHistory">#}
{#                    <div class="d-flex justify-content-between">#}
{#                        <span class="font-500">version 11</span>#}
{#                        <span class="font-italic">from</span>#}
{#                        <span class="font-italic font-600">19/02/2020</span>#}
{#                    </div>#}
{#                    <div class="d-flex justify-content-between mt-1">#}
{#                        <small class="font-italic">Modify</small>#}
{#                        <span>by</span>#}
{#                        <span class="font-600">Test. B</span>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
    {#        End Histories      #}
    {#    start  cart histoires     #}
{#    <div class="bg-white modal-history-modal px-5 pt-4 pb-5" id="modal-view-history">#}
{#        <div class="h-100 w-100 overflow-hidden">#}
{#            <div class="header d-flex flex-column pl-2 mb-5">#}
{#                <div class="slider-icons-group active ml-auto d-none" style="top: unset; left: unset; transform: unset; background-color: rgba(192, 206, 235, 0.7);" @click="closeSideModal()">#}
{#                    <div class="slider-icons">#}
{#                        <i class="fal fa-times text-white"></i>#}
{#                    </div>#}
{#                </div>#}
{#                <div class="title mt-3 d-flex justify-content-between">#}
{#                    <div class="">#}
{#                        #}{#                            <i class="fal fa-tasks"></i>#}
{#                        <i class="fal fa-history font-800" style="color: #1d446b; font-weight: 800;"  ></i>#}
{#                        <span class="mx-3 font-700 text-secondary">Version 11</span>#}
{#                        <i class="text-secondary">from</i>#}
{#                        <span class="ml-3 font-700">19/02/2020  15:35</span>#}
{#                    </div>#}
{#                    <div>#}
{#                        <i class="text-secondary">modify by</i>#}
{#                        <span class="ml-3 font-700">Szarouri</span>#}
{#                    </div>#}
{#                </div>#}
{#            </div>#}
{#            <div class="body-form mt-2 h-100 histories" style="overflow-y: scroll;">#}
{#                <table class="table table-striped my-5">#}
{#                    <thead>#}
{#                    <tr>#}
{#                        <th scope="col">#</th>#}
{#                        <th scope="col">Name</th>#}
{#                        <th scope="col">Description</th>#}
{#                        <th scope="col">Action</th>#}
{#                        <th scope="col" colspan="5">Logic Rules</th>#}
{#                    </tr>#}
{#                    </thead>#}
{#                    <tbody>#}
{#                    <tr>#}
{#                        <th scope="row">recent</th>#}
{#                        <td>JobGroup<span class="text-danger font-700 border">Groupe A</span></td>#}
{#                        <td><span class="text-danger font-700  border">Pour 1er test lancé le 10/07/2020</span> </td>#}
{#                        <th scope="col">Update</th>#}
{#                        <th scope="col" colspan="5">#}
{#                            <div>#}
{#                                <span class="text-primary">JobGoup 1</span>#}
{#                               <div class="">#}
{#                                   <span class="chips_purple"><b>ID : </b><i class="text-secondary"></i></span>#}
{#                                   <span class="chips_purple"><b>Rules : </b><i class="text-secondary">equals</i></span>#}
{#                                   <span class="chips_red"><b> : </b><i class="text-secondary">jobId_78215699</i></span></div>#}
{#                            </div>#}
{#                        </th>#}
{#                    </tr>#}
{#                    <tr>#}
{#                        <th scope="row">Old</th>#}
{#                        <td>JobGroup</td>#}
{#                        <td></td>#}
{#                        <th scope="col">Update</th>#}
{#                        <th scope="col" colspan="5">#}
{#                            <div>#}
{#                                <span class="text-primary">JobGoup 1</span>#}
{#                                <div class="">#}
{#                                    <span class="chips_purple"><b>ID : </b><i class="text-secondary"></i></span>#}
{#                                    <span class="chips_red"><b>Rules : </b><i class="text-secondary">does not equal</i></span>#}
{#                                    <span class="chips_red"><b> : </b><i class="text-secondary">Id_72156989</i></span></div>#}
{#                            </div>#}
{#                        </th>#}
{#                    </tr>#}
{#                    </tbody>#}
{#                </table>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}