apim-developer-portal4/src/components/products/product-subscriptions/ko/runtime/product-subscriptions.html

API management developer portal

<div class="table">

    <!-- ko if: !isUserSignedIn() -->
    <p>
        You need to sign in to see your subscriptions.
    </p>
    <!-- /ko -->

    <!-- ko if: subscriptions().length === 0 && isUserSignedIn()-->
    <p>
        You don't have subscriptions yet.
    </p>
    <!-- /ko -->
    <!-- ko if: subscriptions().length > 0 && isUserSignedIn()-->
    <div class="table-head">
        <div class="table-row">
            <div class="col-md-5">Name</div>
            <div class="col-md-7">Status</div>
        </div>
    </div>

    <!-- ko if: working -->
    <div class="table-body">
        <spinner></spinner>
    </div>
    <!-- /ko -->

    <!-- ko ifnot: working -->
    <div class="table-body">
        <!-- ko foreach: { data: subscriptions, as: 'subscription' } -->
        <div class="table-row">
            <div class="col-md-5" data-bind="text: subscription.name"></div>
            <div class="col-md-7" data-bind="text: subscription.state"></div>
        </div>
        <!-- /ko -->
    </div>

    <!-- /ko -->

    <!-- ko if: hasPager -->
    <!-- ko ifnot: working -->
    <div class="table-footer">
        <ul class="pagination justify-content-center">
            <!-- ko if: hasPrevPage -->
            <li>
                <a href="#" class="page-link" role="button" aria-label="Previous page"
                    data-bind="click: prevPage, enable: hasPrevPage">
                    <i class="icon icon-chevron-left"></i>
                </a>
            </li>
            <!-- /ko -->
            <li>
                <span class="page-link" data-bind="text: page"></span>
            </li>
            <!-- ko if: hasNextPage -->
            <li>
                <a href="#" class="page-link" role="button" aria-label="Next page"
                    data-bind="click: nextPage, enable: hasNextPage">
                    <i class="icon icon-chevron-right"></i>
                </a>
            </li>
            <!-- /ko -->
        </ul>
    </div>
    <!-- /ko -->
    <!-- /ko -->
    <!-- /ko -->
</div>