<div is="emby-scroller" class="view flex flex-direction-column scrollFrameY flex-grow" data-mousewheel="true" data-horizontal="false" data-forcescrollbar="true" data-focusscroll="true" data-bindheader="true">
    <div class="scrollSlider flex-grow flex-direction-column padded-left padded-left-page padded-right padded-top-page padded-bottom-page settingsContainer">
        <div class="readOnlyContent auto-center">
            <style>
                .expiredBackground {
                    background: #cc3333 !important;
                }

                .nearExpiredBackground {
                    background: orange !important;
                }
            </style>

            <div>
                <h2>${HeaderSupportTheTeam}</h2>
                <p>${HeaderSupportTheTeamHelp}</p>

                <p class="benefits"></p>

                <div class="supporterContainer hide">
                    <br />
                    <a class="raised block button-submit" href="https://emby.media/premiere" target="_blank" is="emby-linkbutton">
                        <span>${HeaderBecomeProjectSupporter}</span>
                    </a>
                </div>
            </div>

            <form class="supporterKeyForm">

                <div style="margin: 3em 0 1em;">

                    <h2>${TabSupporterKey}</h2>
                    <div class="inputContainer">
                        <input is="emby-input" type="text" class="txtSupporterKey" label="${LabelSupporterKey}" autocomplete="off" />
                        <div class="fieldDescription">
                            ${LabelSupporterKeyHelp}
                        </div>
                    </div>

                    <div class="hide notSupporter">
                        <p>
                            <span style="color:red;">${MessageInvalidKey}</span>
                            <br/>
                            <a is="emby-linkbutton" data-autohide="true" class="button-link" target="_blank" href="https://support.emby.media/support/solutions/articles/44001173116-my-emby-key-says-it-is-invalid-or-missing">${HeaderGetHelp}</a>
                        </p>
                        <p>
                            ${ErrorMessageInvalidKey}
                        </p>
                    </div>

                </div>
                <p style="text-align:center;">
                    <button is="emby-button" type="submit" class="mbLegacyKeyBtn raised block button-submit">
                        <span>${Save}</span>
                    </button>
                    <button is="emby-button" type="button" class="btnForgotKey button-link" style="margin-top:.25em;">
                        <span>${HeaderForgotKey}</span>
                    </button>
                </p>
            </form>

            <div class="hide isSupporter" style="margin: 2em 0;">
                <h2 style="margin:0;">${HeaderStatus}</h2>

                <div class="status-indicator flex align-items-center flex-direction-row" style="margin: 1em 0;">
                    <div>
                        <i class="md-icon statusIcon" style="font-size: 200%;">&#xe5CA;</i>
                    </div>
                    <div style="margin: 0 1em;">
                        <div class="premiere-status"></div>
                        <div class="secondaryText hide extended-plans"></div>
                    </div>
                </div>

                <div class="premiere-subs hide" style="margin: 2em 0;">
                    <h2 style="margin:0 0 .5em;">${Subscriptions}</h2>
                    <div class="premiere-subs-content"></div>
                </div>
            </div>
        </div>
    </div>
</div>