
<h3>{$tank->name}</h3>
<div id="aspect-content">
    {foreach $levels as $level}
    <div class="aspect-tab">
        <input class="aspect-input" id="item-{$level.up_level_name}" name="aspect" type="checkbox">
        <label class="aspect-label" for="item-{$level.up_level_name}"></label>
        <div class="aspect-content">
            <div class="aspect-info">
                <span class="aspect-name">Canister number {$level.up_level_name}</span>
            </div>
            <div class="aspect-stat">
                <div class="all-opinions">
                    <span class="all-opinions-count">{$level.full}</span>
                    <span>/ {$total_cells}</span>
                </div>
            </div>
        </div>
        <div class="aspect-tab-content">
            <div class="sentiment-wrapper">
                {foreach $level.sec_levels as $sec_level}
                {if $sec_level.full > 0}

                {if $tank->tank_type eq 1}

                <div>
                    <div class="div-fill" style="cursor: default;">
                        <div class="opinion-header">
                            <span>{$sec_level.cell_name}</span>
                            <span>ID ({$sec_level.patient_id})</span>
                            <span>({$sec_level.full}/{$level.sec_total})</span>
                        </div>
                    </div>
                </div>
                {elseif $tank->tank_type eq 2}

                <div>
                    <div class="div-fill" data-target="#last_level_{$level.up_level_name}_{$sec_level.cell_name}" data-toggle="modal" style="cursor: pointer;padding: 5px;">
                        <div class="opinion-header text-center">
                            <span>{$sec_level.cell_name}</span>
                            <hr style="margin: 1px;"/>
                            <div class="mt-checkbox-inline">
                                {foreach $sec_level.third_levels as $th_le}
                                <label class="mt-checkbox">
                                    {if $th_le.patient_id > 0}
                                    <input checked="checked" class="last_cell_tank" disabled="disabled" type="checkbox"
                                           value="{$th_le.cell_part_name}"> {$th_le.cell_part_name}
                                    {else}
                                    <input class="last_cell_tank" data-cell-name="{$sec_level.cell_name}"
                                           data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}" data-up-level="{$level.up_level_name}"
                                           name="last_cell[]" type="checkbox" value="{$th_le.cell_part_name}"> {$th_le.cell_part_name}
                                    {/if}
                                    <span></span>
                                </label>
                                {/foreach}
                            </div>
                        </div>
                    </div>
                </div>


                {/if}


                {else}
                <div>
                    <div class="div-empty" style="cursor: pointer;padding: 5px;" data-target="#last_level_{$level.up_level_name}_{$sec_level.cell_name}" data-toggle="modal">
                        <div class="opinion-header text-center">
                            <span>{$sec_level.cell_name}</span>
                            <hr style="margin: 1px;"/>
                            <div class="mt-checkbox-inline">
                                <label class="mt-checkbox">
                                    <input class="last_cell_tank" data-cell-name="{$sec_level.cell_name}" data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                           type="checkbox" value="1"> 1
                                    <span></span>
                                </label>
                                <label class="mt-checkbox">
                                    <input class="last_cell_tank" data-cell-name="{$sec_level.cell_name}" data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                           type="checkbox" value="2"> 2
                                    <span></span>
                                </label>
                                <label class="mt-checkbox">
                                    <input class="last_cell_tank" data-cell-name="{$sec_level.cell_name}" data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                           type="checkbox" value="3"> 3
                                    <span></span>
                                </label>
                                <label class="mt-checkbox">
                                    <input class="last_cell_tank" data-cell-name="{$sec_level.cell_name}" data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                           data-up-level="{$level.up_level_name}" name="last_cell[]"
                                           type="checkbox" value="4"> 4
                                    <span></span>
                                </label>
                                <label class="mt-checkbox">
                                    <input class="last_cell_tank" data-cell-name="{$sec_level.cell_name}" data-name="last_cell_{$level.up_level_name}_{$sec_level.cell_name}"
                                           data-up-level="{$level.up_level_name}" name="last_cell[]" type="checkbox" value="5"> 5
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                {/if}
                {/foreach}

            </div>
        </div>
    </div>
    {/foreach}
</div>



{literal}
<style>
    #tanks_overlay {
        position: absolute;
        z-index: 99999;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0);
        height: 100%;
        width: 100%;
        text-align: center;
        padding-top: 100px;
    }

    /*body {*/
    /*    background-color: #6fcae7;*/
    /*    overflow-y: scroll;*/
    /*    overflow-x: hidden;*/
    /*}*/

    #aspect-content {
        margin: 50px 0 0;
        font-family: "Poppins", sans-serif;
    }

    #aspect-content * {
        box-sizing: border-box;
    }

    .aspect-tab {
        position: relative;
        width: 100%;
        max-width: 1000px;
        margin: 0 auto 10px;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 0 0 0 1px #ececec;
        opacity: 1;
        transition: box-shadow 0.2s, opacity 0.4s;
    }

    .aspect-tab:hover {
        box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.11);
    }

    .aspect-input {
        display: none;
    }

    .aspect-input:checked ~ .aspect-content + .aspect-tab-content {
        max-height: 3000px;
    }

    .aspect-input:checked ~ .aspect-content:after {
        transform: rotate(0);
    }

    .aspect-label {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        max-height: 80px;
        width: 100%;
        margin: 0;
        padding: 0;
        font-size: 0;
        z-index: 1;
        cursor: pointer;
    }

    .aspect-label:hover ~ .aspect-content:after {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM1NTZBRUEiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
    }

    .aspect-content {
        position: relative;
        display: block;
        height: 80px;
        margin: 0;
        padding: 0 87px 0 30px;
        font-size: 0;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
    }

    .aspect-content:before, .aspect-content:after {
        content: "";
        display: inline-block;
        vertical-align: middle;
    }

    .aspect-content:before {
        height: 100%;
    }

    .aspect-content:after {
        position: absolute;
        width: 24px;
        height: 100%;
        right: 30px;
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPHBhdGggZD0iTTI0IDI0SDBWMGgyNHoiIG9wYWNpdHk9Ii44NyIvPgogICAgICAgIDxwYXRoIGZpbGw9IiNBOUFDQUYiIGZpbGwtcnVsZT0ibm9uemVybyIgZD0iTTE1Ljg4IDE1LjI5TDEyIDExLjQxbC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxIDEtMS40MS0xLjQxbDQuNTktNC41OWEuOTk2Ljk5NiAwIDAgMSAxLjQxIDBsNC41OSA0LjU5Yy4zOS4zOS4zOSAxLjAyIDAgMS40MS0uMzkuMzgtMS4wMy4zOS0xLjQyIDB6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=");
        background-repeat: no-repeat;
        background-position: center;
        transform: rotate(180deg);
    }

    .aspect-name {
        display: inline-block;
        width: 75%;
        margin-left: 16px;
        font-weight: 500;
        color: #242a32;
        white-space: normal;
        text-align: left;
        vertical-align: middle;
    }

    .aspect-stat {
        width: 40%;
        text-align: right;
    }

    .all-opinions,
    .aspect-name {
        font-size: 20px;
        line-height: 22px;
    }

    .all-opinions {
        color: #68af1f;
        text-align: left;
        font-size: 18px;
    }

    .aspect-content + .aspect-tab-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s;
    }

    .aspect-content > div,
    .aspect-stat > div {
        display: inline-block;
    }

    .aspect-content > div {
        vertical-align: middle;
    }

    .positive-count,
    .negative-count,
    .neutral-count {
        display: inline-block;
        margin: 0 0 0 20px;
        padding-left: 26px;
        background-repeat: no-repeat;
        font-size: 13px;
        line-height: 20px;
        color: #363636;
    }

    .positive-count {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiM3RUQzMjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNSAxMS40MjdhNSA1IDAgMCAwIDEwIDAgLjcxNC43MTQgMCAxIDAtMS40MjkgMCAzLjU3MSAzLjU3MSAwIDAgMS03LjE0MiAwIC43MTQuNzE0IDAgMSAwLTEuNDI5IDB6bTEuMDcxLTVhMS4wNzEgMS4wNzEgMCAxIDAgMCAyLjE0MyAxLjA3MSAxLjA3MSAwIDAgMCAwLTIuMTQzem03Ljg1OCAwYTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDMgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3oiLz4KPC9zdmc+Cg==");
    }

    .negative-count {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNGRjZFMDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNSAxNC45OThhLjcxNC43MTQgMCAwIDAgMS40MjkgMCAzLjU3MSAzLjU3MSAwIDAgMSA3LjE0MiAwIC43MTQuNzE0IDAgMSAwIDEuNDI5IDAgNSA1IDAgMSAwLTEwIDB6bTEuMDcxLTguNTdhMS4wNzEgMS4wNzEgMCAxIDAgMCAyLjE0MiAxLjA3MSAxLjA3MSAwIDAgMCAwLTIuMTQzem03Ljg1OCAwYTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDIgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3oiLz4KPC9zdmc+Cg==");
    }

    .neutral-count {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNCQUMyRDYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEwIDE4LjU3MWMtNC43MjYgMC04LjU3MS0zLjg0NS04LjU3MS04LjU3MSAwLTQuNzI2IDMuODQ1LTguNTcxIDguNTcxLTguNTcxIDQuNzI2IDAgOC41NzEgMy44NDUgOC41NzEgOC41NzEgMCA0LjcyNi0zLjg0NSA4LjU3MS04LjU3MSA4LjU3MXpNMjAgMTBjMCA1LjUxNC00LjQ4NiAxMC0xMCAxMFMwIDE1LjUxNCAwIDEwIDQuNDg2IDAgMTAgMHMxMCA0LjQ4NiAxMCAxMHpNNS43MTQgMTEuNDI3YS43MTQuNzE0IDAgMSAwIDAgMS40MjloOC41NzJhLjcxNC43MTQgMCAxIDAgMC0xLjQyOUg1LjcxNHptLjM1Ny01YTEuMDcxIDEuMDcxIDAgMSAwIDAgMi4xNDMgMS4wNzEgMS4wNzEgMCAwIDAgMC0yLjE0M3ptNy44NTggMGExLjA3MSAxLjA3MSAwIDEgMCAwIDIuMTQzIDEuMDcxIDEuMDcxIDAgMCAwIDAtMi4xNDN6Ii8+Cjwvc3ZnPgo=");
    }

    .aspect-info {
        width: 60%;
        white-space: nowrap;
        font-size: 0;
    }

    .aspect-info:before {
        content: "";
        display: inline-block;
        height: 44px;
        vertical-align: middle;
    }

    .chart-pie {
        position: relative;
        display: inline-block;
        height: 44px;
        width: 44px;
        border-radius: 50%;
        background-color: #e4e4e4;
        vertical-align: middle;
    }

    .chart-pie:after {
        content: "";
        display: block;
        position: absolute;
        height: 40px;
        width: 40px;
        top: 2px;
        left: 2px;
        border-radius: 50%;
        background-color: #fff;
    }

    .chart-pie-count {
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        font-size: 14px;
        font-weight: 500;
        line-height: 44px;
        color: #242a32;
        text-align: center;
        z-index: 1;
    }

    .chart-pie > div {
        clip: rect(0, 44px, 44px, 22px);
    }

    .chart-pie > div,
    .chart-pie.over50 .first-fill {
        position: absolute;
        height: 44px;
        width: 44px;
        border-radius: 50%;
    }

    .chart-pie.over50 > div {
        clip: rect(auto, auto, auto, auto);
    }

    .chart-pie.over50 .first-fill {
        clip: rect(0, 44px, 44px, 22px);
    }

    .chart-pie:not(.over50) .first-fill {
        display: none;
    }

    .second-fill {
        position: absolute;
        clip: rect(0, 22px, 44px, 0);
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border-width: 3px;
        border-style: solid;
        box-sizing: border-box;
    }

    .chart-pie.positive .first-fill {
        background-color: #82d428;
    }

    .chart-pie.positive .second-fill {
        border-color: #82d428;
    }

    .chart-pie.negative .first-fill {
        background-color: #ff6e00;
    }

    .chart-pie.negative .second-fill {
        border-color: #ff6e00;
    }

    .aspect-tab-content {
        background-color: #f9f9f9;
        font-size: 0;
        text-align: justify;
    }

    .sentiment-wrapper {
        padding: 24px 30px 30px;
    }

    .sentiment-wrapper > div {
        display: inline-block;
        width: 20%;
        max-width: 390px;
        padding: 0 5px;
        box-sizing: border-box;
        vertical-align: top;
        cursor: default;
        margin: 5px 0px;
    }

    .sentiment-wrapper > div > div {
        width: 100%;
        padding: 16px 24px 20px;
        box-sizing: border-box;
        border-radius: 4px;
        background-color: #fff;
        border: 1px solid #ececec;
        text-align: left;
    }

    .div-fill {
        background-color: #dd5b51 !important;
        cursor: pointer;
    }

    .div-empty {
        background-color: #64c312 !important;
    }

    .opinion-header {
        position: relative;
        width: 100%;
        margin: 0 0 0px;
        font-size: 13px;
        font-weight: 500;
        line-height: 20px;
        color: #242a32;
        text-transform: capitalize;
    }

    .opinion-header > span:nth-child(2) {
        position: absolute;
        right: 0;
    }

    .opinion-header + div > span {
        font-size: 13px;
        font-weight: 400;
        line-height: 22px;
        color: #363636;
    }

    @media screen and (max-width: 800px) {
        .aspect-label {
            max-height: 102px;
        }

        .aspect-content {
            height: auto;
            padding: 10px 87px 10px 30px;
        }

        .aspect-content:before {
            display: none;
        }

        .aspect-content:after {
            top: 0;
        }

        .aspect-content > div {
            display: block;
            width: 100%;
        }

        .aspect-stat {
            margin-top: 10px;
            text-align: left;
        }
    }

    @media screen and (max-width: 750px) {
        .sentiment-wrapper > div {
            display: block;
            width: 100%;
            max-width: 100%;
        }

        .sentiment-wrapper > div:not(:first-child) {
            margin-top: 10px;
        }
    }

    @media screen and (max-width: 500px) {
        .aspect-label {
            max-height: 140px;
        }

        .aspect-stat > div {
            display: block;
            width: 100%;
        }

        .all-opinions {
            margin-bottom: 10px;
        }

        .all-opinions + div > span:first-child {
            margin: 0;
        }
    }

</style>
<script>
    $(window).load(function () {
        // PAGE IS FULLY LOADED
        // FADE OUT YOUR OVERLAYING DIV
        $('#tanks_overlay').fadeOut();
    });
</script>
{/literal}