<div class="app-content">
    <div class="app-content-inner content-pd">
        <ion-scroll class="scroll-area" direction="y" has-bouncing="false" overflow-scroll="false" delegate-handle="scrollerPopupChatDetailSetting">
            <div class="box-setting-4">
                <div class="content content-in">
                    <div class="itm">
                        <div class="layout-fixed">
                            <div class="icon">
                                <svg class="h22px" viewBox="0 0 54 54"><path style="fill:#81B4DE;" d="M43.5,19c-4.971,0-9-4.029-9-9c0-0.688,0.084-1.356,0.231-2H4.735C2.396,8,0.5,9.896,0.5,12.235  v37.53C0.5,52.104,2.396,54,4.735,54h37.53c2.339,0,4.235-1.896,4.235-4.235V18.477C45.56,18.81,44.554,19,43.5,19z" /><circle style="fill:#1075BB;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" cx="43.5" cy="10" r="9" /></svg>
                            </div>
                            <div>
                                <div class="text-title-4">Notification</div>
                                <div class="text">{{currentsetting.isnotification==1?'On':'Off'}}</div>
                            </div>
                            <div class="w60px clear">
                                <div class="checkedbox-toggle-1 block-i right">
                                    <input type="checkbox" name="isnotification" ng-change="changeSetting()" ng-model="currentsetting.isnotification" ng-true-value="'1'" ng-false-value="'0'"><i></i><span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-expandable box-setting-4">
                <div class="content content-in">
                    <div class="itm">
                        <div class="layout-fixed">
                            <div class="icon">
                                <svg class="h22px" viewBox="0 0 512 512"><path fill="#81B4DE" d="M284.432,431.128l-32,6.376V0.032L268.4,0l0,0c1.632,0,146.224,2.224,148.336,204.816l-32,0.336  C383.344,72.448,316.128,41.44,284.432,34.208V431.128z" /><ellipse style="fill:#1075BB;" cx="189.856" cy="430.976" rx="94.592" ry="81.024" /></svg>
                            </div>
                            <div>
                                <div class="text-title-4">Sound</div>
                                <div class="text">{{getSoundName(currentsetting.sound_id)}}</div>
                            </div>
                            <div class="w60px clear">
                                <div class="checkedbox-toggle-1 block-i right">
                                    <input type="checkbox" name="issound" ng-change="changeSetting()" ng-model="currentsetting.issound" ng-true-value="'1'" ng-false-value="'0'"><i></i><span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item-expandable itm row-one-content no-saperator" ng-repeat="item in sounds" ng-if="currentsetting.issound == 1">
                        <div class="layout-fixed">
                            <div class="w40px clear">
                                <div class="checkbox-image-1 tear block-i left">
                                    <input input type="radio" ng-change="changeSetting()" ng-model="$parent.currentsetting.sound_id" value="{{item.id}}" name="rdSound">
                                    <i class="pd3 rounded-4">
                                        <svg class="h14px" viewBox="0 0 512 512"><path d="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0    c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7    C514.5,101.703,514.499,85.494,504.502,75.496z" /></svg>
                                    </i>
                                </div>
                            </div>
                            <div>
                                <div class="text">{{item.name}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="more-overlay no-item-more clear" onclick="toggleExpand(this)" ng-click="resizeScroll('scrollerPopupChatDetailSetting')" ng-if="currentsetting.issound == 1">
                        <div class="h30px layout-fixed w-auto-i pdL50">
                            <div class="text-link-1 pdR10"><span class="more-text">Select sound</span><span class="less-text">Hide select sound</span></div>
                            <div>
                                <button class="more-icon bg-transparent pd0-i relative" type="button">
                                    <svg class="h20px" viewBox="0 0 60 60"> <circle r="3" cy="30" cx="18" style="fill:#1075bb;" /> <circle r="3" cy="30" cx="30" style="fill:#1075bb;" /> <circle r="3" cy="30" cx="42" style="fill:#1075bb;" /> <line y2="16" x2="15" y1="30" x1="1" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="44" x2="15" y1="30" x1="1" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="44" x2="45" y1="30" x1="59" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="16" x2="45" y1="30" x1="59" style="fill:none;stroke:#1075bb;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" /> </svg>
                                </button>
                                <button class="less-icon bg-transparent pd0-i relative" type="button">
                                    <svg class="h16px clr-symbol-clickable" viewBox="0 0 407.437 407.437"><polygon points="203.718,84.507 386.258,266.453 407.437,245.205 203.718,42.15 0,245.205 21.179,266.453  " /><polygon points="0,344.039 21.179,365.287 203.718,183.341 386.258,365.287 407.437,344.039 203.718,140.984  " /></svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-scroll>
    </div>
</div>
<div class="app-control">
    <div class="layout-fixed full-h pdT2">
        <div class="w42px full-h relative">
            <button class="bg-transparent pd0-i full text-left pdL10-i" type="button" onclick="openQuickOption(this)">
                <svg class="h20px" viewBox="0 0 460.713 460.713"> <g> <rect y="115.356" width="302" height="30" fill="#FFFFFF" /> <polygon points="335.786,202.231 398.25,264.694 460.713,202.232  " fill="#FFFFFF" /> <rect y="315.356" width="302" height="30" fill="#FFFFFF" /> <rect y="215.356" width="302" height="30" fill="#FFFFFF" /> </g> </svg>
            </button>
            <div class="quick-popup box-popup-1 display-bottom-left mgB55" onclick="closeQuickOption(this)">
                <div class="popup-content w140px">
                    <ul class="list-item-03">
                        <li onclick="">
                            <div class="layout-fixed">
                                <div class="icon-area">
                                    <svg class="h15px" viewBox="0 0 423.755 423.755"> <path d="M43.84,281.457c-18.585-44.869-18.586-94.29,0-139.159c10.649-25.709,26.678-48.152,46.86-66.135l60.86,60.86V15.099   H29.635l39.88,39.88c-64.293,58.426-88.5,153.2-53.391,237.959c14.167,34.202,37.07,64.159,66.234,86.634   c28.275,21.789,61.873,36.201,97.162,41.677l4.601-29.646C120.778,381.774,68.337,340.597,43.84,281.457z" fill="#FFFFFF" /> <path d="M407.516,292.938c21.652-52.272,21.652-109.848,0-162.12c-14.167-34.202-37.071-64.159-66.234-86.633   C313.007,22.395,279.409,7.983,244.12,2.507l-4.601,29.646c63.342,9.829,115.783,51.005,140.28,110.146   c18.586,44.869,18.586,94.29,0,139.159c-10.649,25.709-26.678,48.152-46.859,66.135l-60.86-60.86v121.924h121.924l-39.801-39.801   C377.118,348.099,395.334,322.348,407.516,292.938z" fill="#FFFFFF" /> </svg>
                                </div>
                                <div class="name-area text-link-1">
                                    Clear all
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="popup-overlay"></div>
            </div>
        </div>
        <div class="full-h">
            <button class="button-form-field-1 darkgray position-left full" type="button" ng-click="closeTarget('#popupChatDetailSetting');">
                Cancel
            </button>
        </div>
        <div class="full-h">
            <button class="button-form-field-1 position-right full" ng-click="closeTarget('#popupChatDetailSetting');">
                OK
            </button>
        </div>
    </div>
</div>