const HanyuuOAuth2AppScopeEntry = function(text, warn) {
    const icon = <div class="oauth2-scope-perm-icon"/>;
    if(warn)
        icon.classList.add('oauth2-scope-perm-icon-warn');

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

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

const HanyuuOAuth2AppScopeList = function(scopes) {
    const permsElem = <div class="oauth2-scope-perms"/>;
    if(Array.isArray(scopes) && scopes.length > 0) {
        for(const scope of scopes)
            if(typeof scope === 'string')
                permsElem.appendChild(new HanyuuOAuth2AppScopeEntry(scope).element);
    } else
        permsElem.appendChild(new HanyuuOAuth2AppScopeEntry('A limited amount of things. No scope was specified by the developer.', true).element);

    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; },
    };
};