<style>
    @keyframes placeHolderShimmer {
        0% {
            background-position: -800px 0
        }

        100% {
            background-position: 800px 0
        }
    }

    .animated-background {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 70px;
        position: relative;
    }

    .animated-background-pax {
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
        animation-name: placeHolderShimmer;
        animation-timing-function: linear;
        background-color: #f6f7f8;
        background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
        background-size: 800px 104px;
        height: 50px;
        position: relative;
    }

    .main-item {
        padding: 2px;
    }

    .input-group.max-width-input {
        width: 160px;
    }
</style>
<div class="fare-summay-block">
    <div class="head-element">Fare Summary</div>

    <div class="summary-grid" ng-if="loadingHotel">
        <div class="summary-block">
            <div class="animated-background-pax">
                <div class="background-masker"></div>
            </div>
        </div>
        <div class="summary-block">
            <div class="animated-background-pax">
                <div class="background-masker"></div>
            </div>
        </div>
        <div class="summary-block">
            <div class="animated-background-pax">
                <div class="background-masker"></div>
            </div>
        </div>
    </div>
    <div class="summary-grid" style="display: none;" id="summary-grid">
        <div class="summary-block">
            <div class="fare-head">
                <div>Base Fare</div>
                <div>{{fare.Currncy}} {{fare.BaseFare | number:2}}</div>
            </div>
            <div class="fare-desc" ng-repeat="(key, items) in fare.BaseFareArray">
                <div>{{items.name}} <br> <span>Room Taxes</span></div>
                <div>
                    <div class="input-group max-width-input">
                        <div class="input-group-addon">{{fare.Currncy}}</div>
                        <input id="RoomPrice-{{key}}" name="RoomPrice-{{key}}" index="{{key}}" ng-model="items.BaseFare" ng-keyup="RoomPriceSum(key, items)" class="form-control text-right">
                    </div>
                    <div class="input-group max-width-input">
                        <div class="input-group-addon">{{fare.Currncy}}</div>
                        <input id="RoomTaxes-{{key}}" name="RoomTaxes-{{key}}" index="{{key}}" ng-model="items.Taxes" ng-keyup="RoomPriceSum(key, items)" class="form-control text-right">
                    </div>
                </div>
                <!-- <div>Room Taxes</div>
                <div>
                    <div class="input-group max-width-input">
                        <div class="input-group-addon">{{fare.Currncy}}</div>
                        <input id="RoomTaxes-{{key}}" name="RoomTaxes-{{key}}" index="{{key}}" ng-model="items.Taxes" ng-keyup="RoomPriceSum(key, items)" class="form-control text-right">
                    </div>
                </div> -->
            </div>
        </div>
        <div class="summary-block">
            <div class="fare-head">
                <div>Convenience Surcharge</div>
                <div>{{fare.Currncy}} {{(fare.TaxesandFee + fare.FixedMarkUp + fare.GSTOnMarkUp) | number:2}}</div>
            </div>
            <!-- <div class="fare-desc">
                <div>Room Taxes</div>
                <div>
                    <div class="input-group max-width-input">
                        <div class="input-group-addon">{{fare.Currncy}}</div>
                        <input id="RoomTaxes" name="RoomTaxes" class="form-control text-right" ng-model="fare.TaxesandFee" ng-keyup="RoomPriceSum('NA')">
                    </div>
                </div>
            </div> -->
            <div class="fare-desc">
                <div>Adjustments <input type="checkbox" ng-model="Adjustments" ng-change="RoomPriceSum('NA')"></div>
                <div>
                    <div class="input-group max-width-input">
                        <div class="input-group-addon">{{fare.Currncy}}</div>
                        <input id="Adjustments" name="Adjustments" readonly class="form-control text-right" ng-model="fare.Adjustments" ng-keyup="RoomPriceSum('NA')">
                    </div>
                </div>
            </div>
            <div class="fare-desc">
                <div>Service Fee</div>
                <div>
                    <div class="input-group max-width-input">
                        <div class="input-group-addon">{{fare.Currncy}}</div>
                        <input id="FixedMarkUp" name="FixedMarkUp" class="form-control text-right" ng-model="fare.FixedMarkUp" ng-keyup="RoomPriceSum('NA')">
                    </div>
                </div>
            </div>
            <div class="fare-desc">
                <div>GST</div>
                <div>
                    <div class="input-group max-width-input">
                        <div class="input-group-addon">{{fare.Currncy}}</div>
                        <input id="GSTOnMarkUp" name="GSTOnMarkUp" class="form-control text-right" ng-model="fare.GSTOnMarkUp" ng-keyup="RoomPriceSum('NA')">
                    </div>
                </div>
            </div>
            <div class="fare-desc">
                <div>Discount Applied</div>
                <div>
                    - {{fare.Currncy}} {{fare.Discount}}
                </div>
            </div>
        </div>
        <div class="summary-block">
            <div class="fare-head">
                <div>Total Payable</div>
                <div>{{fare.Currncy}} {{fare.GrandTotal | number:2}}</div>
            </div>
            <div class="fare-desc">
                <div>Gross Price</div>
                <div>{{fare.Currncy}} {{fare.GrandTotal | number:2}}</div>
            </div>
            <div class="fare-desc">
                <div>Net Price</div>
                <div>{{fare.Currncy}} {{(fare.GrandTotal - (fare.FixedMarkUp + fare.GSTOnMarkUp)) | number:2}}</div>
            </div>
        </div>
    </div>

</div>