<div>
    <div class="copy">
        <h3>
            Right To Left
        </h3>
        <p>
            Some languages (Arabic and Hebrew especially) render content from the right
            to the left of the page. HTML accommodates this with the 'dir' attribute.
            Setting 'dir' to 'rtl' on any element causes the element's content to flow
            from right to left.
        </p>
        <p>
            The <b>FlexGrid</b> supports this automatically. If the element hosting the
            grid has the 'dir' attribute set to 'rtl', the grid will render columns
            from the right to the left. You don't have to set any properties on the
            control.
        </p>
        <p>
            Note that the 'dir' attribute value is inherited, so if you set it on the
            body tag for example, the entire page will be rendered from right to left,
            including the grid.
        </p>
        <p>
            Note also that CSS has a 'direction' attribute that performs the same
            function as the 'dir' element attribute. The 'dir' attribute is generally
            considered more appropriate for
            <a href="http://www.w3.org/International/questions/qa-bidi-css-markup">several reasons</a>,
            including the fact that the 'dir' attribute can be used in CSS rules.
        </p>
    </div>

    <!-- commands -->
    <div class="container-fluid">
        <div class="row well app-filter">
            <div class="col-sm-6 col-xs-12 app-nopad">
                <!-- grouping -->
                <wj-menu [(value)]="groupBy" [header]="'Group by'">
                    <wj-menu-item [value]="''">(no grouping)</wj-menu-item>
                    <wj-menu-item [value]="'Country'">Country</wj-menu-item>
                    <wj-menu-item [value]="'Product'">Product</wj-menu-item>
                    <wj-menu-item [value]="'Country/Product'">Country and Product</wj-menu-item>
                    <wj-menu-item [value]="'Product/Country'">Product and Country</wj-menu-item>
                    <wj-menu-item [value]="'Product/Country/Amount'">Product, Country and Amount</wj-menu-item>
                </wj-menu>
                <!-- culture -->
                <wj-menu [(value)]="culture" [header]="'Culture'">
                    <wj-menu-item [value]="'en'">English</wj-menu-item>
                    <wj-menu-item [value]="'de'">German</wj-menu-item>
                    <wj-menu-item [value]="'it'">Italian</wj-menu-item>
                    <wj-menu-item [value]="'fr'">French</wj-menu-item>
                    <wj-menu-item [value]="'pt'">Portuguese</wj-menu-item>
                    <wj-menu-item [value]="'ru'">Russian</wj-menu-item>
                    <wj-menu-item [value]="'ja'">Japanese</wj-menu-item>
                    <wj-menu-item [value]="'ko'">Korean</wj-menu-item>
                </wj-menu>
            </div>
            <div class="col-sm-6 col-xs-12 app-nopad">
                <!-- navigator -->
                <wj-collection-view-navigator [cv]="flex.collectionView">
                </wj-collection-view-navigator>
                <!-- data size -->
                <wj-menu [(value)]="itemCount" [header]="'Data Size'">
                    <wj-menu-item [value]="5">5</wj-menu-item>
                    <wj-menu-item [value]="50">50</wj-menu-item>
                    <wj-menu-item [value]="500">500</wj-menu-item>
                    <wj-menu-item [value]="5000">5,000</wj-menu-item>
                    <wj-menu-item [value]="50000">50,000</wj-menu-item>
                    <wj-menu-item [value]="100000">100,000</wj-menu-item>
                    <wj-menu-item [value]="500000">500,000</wj-menu-item>
                    <wj-menu-item [value]="1000000">1,000,000</wj-menu-item>
                </wj-menu>
            </div>
        </div>
    </div>
    <!-- the grid -->
    <div>

        <!-- the grid -->
        <wj-flex-grid dir="rtl"
                      class="grid"
                      #flex
                      [itemsSource]="data"
                      (itemsSourceChanged)="itemsSourceChangedHandler()">
            <wj-flex-grid-column [header]="'ID'" [binding]="'id'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Country'" [binding]="'country'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Product'" [binding]="'product'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Color'" [binding]="'color'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Amount'" [binding]="'amount'" [format]="'n0'" [aggregate]="'Sum'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Pending'" [binding]="'amount2'" [format]="'n0'" [aggregate]="'Sum'"></wj-flex-grid-column>
            <wj-flex-grid-column [header]="'Discount'" [binding]="'discount'" [format]="'p0'" [aggregate]="'Avg'"></wj-flex-grid-column>
        </wj-flex-grid>

        <!-- show the current item too -->
        <h4>Current Item</h4>
        <dl class="dl-horizontal current-item">
            <dt>ID</dt>
            <dd>{{flex.collectionView.currentItem?.id}}</dd>
            <dt>Country</dt>
            <dd>{{flex.collectionView.currentItem?.country}}</dd>
            <dt>Product</dt>
            <dd>{{flex.collectionView.currentItem?.product}}</dd>
            <dt>Color</dt>
            <dd>{{flex.collectionView.currentItem?.color}}</dd>
            <dt>Amount</dt>
            <dd>{{flex.collectionView.currentItem?.amount | number:'1.2-2'}}</dd>
        </dl>
    </div>
</div>
