<head>
    <link rel="stylesheet" href="/technical-styles/main.css">
    <link rel="stylesheet" href="/technical-styles/subscription-modal.css">
</head>
<section>
    <div id="planModal" class="modal custom-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div id="modal-content">
                    <div class="modal-header">
                        <h5 class="dev-header h5" id="modalTitle">Subscription Plan Details</h5>
                    </div>
                    <div class="modal-body">
                        <h6 class="dev-header h6">Subcription Plan: <span id="planName"></h6>
                        <div id="subscribedAppsSection">
                            {{#if subscribedApps.length}}
                            <h6 class="dev-header h6">Subscribed Applications:</h6>
                            <ul class="items-label">
                                {{#each subscribedApps}}
                                <li>{{this.name}}</li>
                                {{/each}}
                            </ul>
                            {{else}}
                            <p>No subscribed applications.</p>
                            {{/if}}
                        </div>
                        {{#if applications}}
                        <div id="form-group">
                            <label class="dev-header h6" for="applicationSelect">Select an Application</label>
                            <select id="applicationSelect" class="form-control items-label">
                                {{#each applications}}
                                <option value="{{id}}">{{name}}</option>
                                {{/each}}
                            </select>
                        </div>
                        {{else}}
                        <div class="create-application-content">
                            <p>
                                No applications available. Please
                                <a href="#" class="create-application-link" onclick="showApplicationForm()">Create a new
                                    application</a>.
                            </p>
                            {{/if}}
                        </div>
                    </div>
                    <div id="applicationFormSection" class="app-selection">
                        <div class="application-creation-body">
                            <h5 class="dev-header h5">Create a New Application</h5>
                            <h6 for="newAppName" class="dev-header h6">Application Name</h6>
                            <input type="text" id="appName" pattern="[a-zA-Z0-9]+" class="form-control input-content"
                                placeholder="Enter application name" required>
                        </div>
                    </div>
                    <div class="custom-modal-btn-section">
                        <button type="button" class="common-btn-outlined" style="margin-right: 0.5rem;"
                            data-dismiss="modal" onclick="closeModal()">Close</button>
                        {{#if applications}}
                        <button type="submit" class="common-btn-primary" id="subButton"
                            onclick="handleSubscribe(null,null)">Subscribe</button>
                        {{else}}
                        <button type="submit" class="common-btn-primary" id="createSubButton"
                            onclick="handleCreateSubscribe()" {{#if devMode}}disabled{{/if}}>Create & Subscribe</button>
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>