<commit_before><style>
    /* Icon Font */
    @font-face {
        font-family: 'icon_font';
        src: url('assets/font/icon_font.eot?bg2l24');
        src: url('assets/font/icon_font.eot?#iefixbg2l24') format('embedded-opentype'),
             url('assets/font/icon_font.woff?bg2l24') format('woff'),
             url('assets/font/icon_font.ttf?bg2l24') format('truetype'),
             url('assets/font/icon_font.svg?bg2l24#icon_font') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    [class^="icon-"], [class*=" icon-"] {
        font-family: 'icon_font';
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-arbeit:before {content: "\e600";}
    .icon-bildung:before {content: "\e601";}
    .icon-demographie:before {content: "\e602";}
    .icon-erholung:before {content: "\e603";}
    .icon-geo:before {content: "\e604";}
    .icon-gesundheit:before {content: "\e605";}
    .icon-jugend:before {content: "\e606";}
    .icon-kultur:before {content: "\e607";}
    .icon-protokolle:before {content: "\e608";}
    .icon-sicherheit:before {content: "\e609";}
    .icon-sozial:before {content: "\e60b";}
    .icon-tourismus:before {content: "\e60c";}
    .icon-verentsorgung:before {content: "\e610";}
    .icon-verkehr:before {content: "\e611";}
    .icon-verwaltung:before {content: "\e612";}
    .icon-wahl:before {content: "\e613";}
    .icon-wirtschaft:before {content: "\e614";}
    .icon-wohnen:before {content: "\e615";}
    .icon-sonstiges:before {content: "\e60a";}

    .icon-oeffentlich:before {content: "\e60a";}

    .icon-transport_und_verkehr:before {content: "\e60d";}
    .icon-umwelt_und_klima:before {content: "\e60e";}
    .icon-verbraucherschutz:before {content: "\e60f";}

    ul.category_matrix {
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }

    ul.category_matrix li {
        padding-bottom: 1em;
    }

    ul.category_matrix .category_icon {
        font-size: 2em;
    }

    ul.category_matrix li:hover .category_icon {
        color: #99CC00;
    }

    ul.category_matrix .category_icon.active {
        color: #7f99b2 !important;
    }

    ul.category_matrix .category_icon.active:hover {
        color: #608000 !important;
    }


</style>
<div>
    <h2>Kategorien</h2>

    <ul class="category_matrix">
        <li ng-repeat="(key,value) in category_mapping">
            <span class="category_icon icon-{{key}}" title="{{value}}"
                  ng-click="toggle(key)"
                  ng-mouseover="$parent.hovered_category=key"
                  ng-class="{'active': selected_categories.contains(key)}"></span>
        </li>
    </ul>
    <span>{{category_mapping[hovered_category]}} ({{categories[hovered_category].size}})</span>

    <div>
        <strong>selected:</strong>
        <ul>
            <li data-ng-repeat="key in selected_categories.values()">
                {{category_mapping[key]}} ({{categories[key].size}})
            </li>
        </ul>
    </div>

</div><commit_msg>commented list of selected categories out (looks ugly, we need another solution for this)<commit_after><style>
    /* Icon Font */
    @font-face {
        font-family: 'icon_font';
        src: url('assets/font/icon_font.eot?bg2l24');
        src: url('assets/font/icon_font.eot?#iefixbg2l24') format('embedded-opentype'),
             url('assets/font/icon_font.woff?bg2l24') format('woff'),
             url('assets/font/icon_font.ttf?bg2l24') format('truetype'),
             url('assets/font/icon_font.svg?bg2l24#icon_font') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    [class^="icon-"], [class*=" icon-"] {
        font-family: 'icon_font';
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;

        /* Better Font Rendering =========== */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-arbeit:before {content: "\e600";}
    .icon-bildung:before {content: "\e601";}
    .icon-demographie:before {content: "\e602";}
    .icon-erholung:before {content: "\e603";}
    .icon-geo:before {content: "\e604";}
    .icon-gesundheit:before {content: "\e605";}
    .icon-jugend:before {content: "\e606";}
    .icon-kultur:before {content: "\e607";}
    .icon-protokolle:before {content: "\e608";}
    .icon-sicherheit:before {content: "\e609";}
    .icon-sozial:before {content: "\e60b";}
    .icon-tourismus:before {content: "\e60c";}
    .icon-verentsorgung:before {content: "\e610";}
    .icon-verkehr:before {content: "\e611";}
    .icon-verwaltung:before {content: "\e612";}
    .icon-wahl:before {content: "\e613";}
    .icon-wirtschaft:before {content: "\e614";}
    .icon-wohnen:before {content: "\e615";}
    .icon-sonstiges:before {content: "\e60a";}

    .icon-oeffentlich:before {content: "\e60a";}

    .icon-transport_und_verkehr:before {content: "\e60d";}
    .icon-umwelt_und_klima:before {content: "\e60e";}
    .icon-verbraucherschutz:before {content: "\e60f";}

    ul.category_matrix {
        -moz-column-count: 6;
        -webkit-column-count: 6;
        column-count: 6;
    }

    ul.category_matrix li {
        padding-bottom: 1em;
    }

    ul.category_matrix .category_icon {
        font-size: 2em;
    }

    ul.category_matrix li:hover .category_icon {
        color: #99CC00;
    }

    ul.category_matrix .category_icon.active {
        color: #7f99b2 !important;
    }

    ul.category_matrix .category_icon.active:hover {
        color: #608000 !important;
    }


</style>
<div>
    <h2>Kategorien</h2>

    <ul class="category_matrix">
        <li ng-repeat="(key,value) in category_mapping">
            <span class="category_icon icon-{{key}}" title="{{value}}"
                  ng-click="toggle(key)"
                  ng-mouseover="$parent.hovered_category=key"
                  ng-class="{'active': selected_categories.contains(key)}"></span>
        </li>
    </ul>
    <span>{{category_mapping[hovered_category]}} ({{categories[hovered_category].size}})</span>

    <!--
    <div>
        <strong>selected:</strong>
        <ul>
            <li data-ng-repeat="key in selected_categories.values()">
                {{category_mapping[key]}} ({{categories[key].size}})
            </li>
        </ul>
    </div>
    -->

</div>
{'fraction_non_alphanumeric': 0.17706602205771266, 'fraction_numerical': 0.029913884272548725, 'mean_word_length': 2.5861321776814736, 'pattern_counts': {'":': 0, '<': 48, '<?xml version=': 0, '>': 48, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1051018', 'n_tokens_mistral': 2446, 'n_tokens_neox': 2294, 'n_words': 364}