<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Twilio</title>

        <style type="text/css">
            .template {
                display: none;
            }
            .btnsubmit {
                margin: 25px;
                border-radius: 10px;
                font-size: 18px;
                font-family: "Cookie", cursive;
                cursor: pointer;
            }
        </style>
        <link rel="manifest" href="/manifest.webmanifest" />
    </head>

    <body>
        <h1>Twilio Fetch Usages:-</h1>

        <form>
            accountId :
            <input twilio="twilioGetUsage.accountId" required /> authToken :
            <input twilio="twilioGetUsage.authToken" required /> Page size :
            <input placeholder="10" twilio="twilioGetUsage.pagesize" required />
            <br />
            <button class="btnsubmit" actions="twilioGetUsage">
                Twilio Fetch Usages
            </button>
        </form>

        <div template_id="twilioGetUsage">
            <h4>Twilio Fetch Usages :-</h4>
            <div class="template margin:10px" value="{{data.id}}" render="data">
                <div
                    style="
                        display: flex;
                        align-items: center;
                        width: 100%;
                        flex-wrap: wrap;
                    ">
                    accountSid : -
                    <h4
                        class="margin-right:10px"
                        value="{{data.accountSid}}"></h4>
                    category : -
                    <h4
                        class="margin-right:10px"
                        value=" {{data.category}} "></h4>
                    price : -
                    <h4
                        class="margin-right:10px"
                        value=" {{data.price}} ({{data.priceUnit}}) "></h4>
                    usage :-
                    <h4
                        class="margin-right:10px"
                        value=" {{data.usage}} ({{data.usageUnit}}) "></h4>
                    count : -
                    <h4
                        class="margin-right:10px"
                        value=" {{data.count}} ({{data.countUnit}}) "></h4>
                </div>
                <hr />
            </div>
        </div>
    </body>

    <!--CoCreateJS-->
    <!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"  ></script>-->

    <!--CoCreate Plugins-->

    <script src="../dist/CoCreate-twilio.js"></script>
</html>
