const HanyuuOAuth2AppScopeEntry = function(text) {
    const element = <div class="oauth2-scope-perm">
        <div class="oauth2-scope-perm-icon"></div>
        <div class="oauth2-scope-perm-text">{text}</div>
    </div>;

    return {
        get element() { return element; },
    };
};

const HanyuuOAuth2AppScopeList = function() {
    // TODO: actual scope listing
    const permsElem = <div class="oauth2-scope-perms">
        {new HanyuuOAuth2AppScopeEntry('Do anything because I have not made up scopes yet.')}
        {new HanyuuOAuth2AppScopeEntry('Eat soup.')}
        {new HanyuuOAuth2AppScopeEntry('These are placeholders.')}
        {new HanyuuOAuth2AppScopeEntry('This one is really long because I want to test wrapping and how the chevron icon thing will handle it so there will be a lot of text here, the app will not be gaining anything from it but yeah sometimes you just need to explode seventy times.')}
    </div>;

    const element = <div class="oauth2-scope">
        <div class="oauth2-scope-header">This application will be able to:</div>
        {permsElem}
    </div>;

    return {
        get element() { return element; },
    };
};