<vbox class="Form">
    <style>
        @bootingIndicator {
            position: absolute;
            left: 0px;
            right: 0px;
            top: 46%;
            text-align: center;

            opacity: 0;
            animation: pulsate 1s ease-out;
            animation-iteration-count: infinite;
        }
        @collectionContainer {
            flex-wrap: wrap;
            overflow: auto;
            padding: 0em 1em 1em 0em;
        }
        @collectionContainer[loaded] @bootingIndicator {
            display: none;
        }
        @collectionContainer hbox.ContentWrapper {
            flex-wrap: wrap;
            overflow: auto;
        }
        @collectionContainer .CollectionView {
            display: inline-flex;
            width: 15em;
            margin: 1em 0em 0em 1em;
            padding: 1em;
            box-shadow: @card_shadow;
            text-align: left;
            position: relative;
        }
        @collectionContainer .CollectionView[installed="true"] > * {
            opacity: 0.3;
        }
        @collectionContainer .CollectionView[installed="true"] > .Controls {
            opacity: 1;
        }
        @collectionContainer .CollectionView[installed="true"] > .Controls > button[anon-id="buttonInstall"],
        @collectionContainer .CollectionView:not([installed="true"]) > .Controls > button[anon-id="buttonUninstall"] {
            display: none;
        }
        @collectionContainer .CollectionView button[anon-id="buttonUninstall"] {
            color: #F00;
        }
        @collectionContainer .CollectionView[installed="true"]::after {
            content: "Installed";
            position: absolute;
            top: 1em;
            right: 1em;
            color: #FFF;
            display: block;
            background: @primary_color;
            box-shadow: 0px 0px 3px #00000022;
            padding: 0.5em;
            opacity: 1;
            border: solid 1px #00000022;
        }
        
        @collectionContainer .CollectionView i.Icon {
            @iconify();
            font-size: 2em;
        }
        @collectionContainer .CollectionView .Name {
            padding-left: 0.5em;
        }
        @collectionContainer .CollectionView .Name strong,
        @collectionContainer .CollectionView .Name span {
            overflow: hidden;
            text-overflow: ellipsis;
        }
        @collectionContainer .CollectionView .Name span {
        }
        @collectionContainer .CollectionView .Thumb {
            height: 12em;
        }
        @collectionContainer .CollectionView .Thumb span {
            background-size: cover;

            display: inline-block;
            width: 100%;
            height: 100%;
        }
        @collectionContainer .CollectionView .Title {
            margin: 5px 0 0 0;
            font-weight: bold;
            font-size: 1em;
            text-overflow: ellipsis;
            overflow: hidden;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        @collectionContainer .CollectionView .Info {
            margin-bottom: 10px;
        }
        @collectionContainer .CollectionView .Description {
            font-size: 0.85em;

            text-overflow: ellipsis;
            overflow: hidden;
            box-sizing: border-box;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
        }

        @collectionContainer button[selected="true"] {
            background-color: @selected_button_bg;
        }

        @media (min-width: 1600px) {
            @collectionContainer {
                width: 92em;
            }
        }

        .CollectionView .Controls {
            padding-top: 1em;
            align-items: center;
            justify-content: flex-end;
        }
        .CollectionView .Controls .CollectionVersion {
          overflow: hidden;

          flex-grow: 1;
          min-width: 100px;
          display: flex;
          margin-right: 10px;
        }
        .CollectionView .Controls .Progressbar {
          height: 4px;
          position: relative;
          overflow: hidden;
          background-color: #ddd;

          flex-grow: 1;
          min-width: 100px;
          align-items: center;
          display: flex;
          margin-right: 10px;
        }
        .CollectionView .Controls .Progressbar:before {
          display: block;
          position: absolute;
          content: "";
          left: -100px;
          width: 200px;
          height: 4px;
          background-color: #2980b9;
          animation: loading 2s linear infinite;
        }

        .CollectionView .Controls button {
            height: 1.8em;
            line-height: 1.8em;
            border: none;
        }
        .CollectionView .Controls button:not(:hover),
        .CollectionView .Controls button[disabled] {
        }

    </style>
    <hbox anon-id="collectionContainer" flex="1">
        <ui:RepeaterView tag="vbox" content-wrapper-tag="hbox" anon-id="collectionRepeater" flex="1">
            <vbox class="CollectionView" installed="false" anon-id="collectionView">
                <vbox role="item" flex="1">
                    <vbox class="Thumb">
                        <span anon-id="collectionThumb"></span>
                    </vbox>
                    <vbox class="Title">
                        <span anon-id="collectionTitle"></span>
                    </vbox>
                    <vbox class="Info">
                        <a href=""><span anon-id="collectionAuthor"></span></a>
                    </vbox>
                    <vbox class="Description">
                        <span anon-id="collectionDescription"></span>
                    </vbox>
                </vbox>
                <hbox class="Controls">
                    <span class="CollectionVersion" anon-id="collectionVersion"></span>
                    <div class="Progressbar" style="display:none" anon-id="progressBar"></div>
                    <button anon-id="buttonInstall"><i>file_download</i><span>Install</span></button>
                    <button anon-id="buttonUninstall"><i>delete</i><span>Uninstall</span></button>
                </hbox>
            </vbox>
        </ui:RepeaterView>
        <div anon-id="bootingIndicator"><img src="css/images/logo-shadow.png" /></div>
    </hbox>
</vbox>
