@inherits System.Web.Mvc.WebViewPage
<div ng-controller="Umbraco.canvasdesigner.googlefontpicker">

    <div class="box-slider">
        <div class="fontFamilyPickerPreview" ng-click="open(item.values)" ng-style="setStyleVariant()">
            <span>Aa</span>
            {{ item.values.fontFamily }}
            <i ng-if="item.values.fontFamily != ''" ng-click="item.values.fontFamily = ''" class="icon icon-delete fontPickerDelete"></i>
        </div>
    </div>

</div>

<script type="text/ng-template" id="googlefontdialog.html">

    <div ng-controller="googlefontdialog.controller">

        <div class="modal-header canvasdesigner-fontfamilypicker">
            <select class="font-list" ng-model="selectedFont" ng-change="showFontPreview(selectedFont)" ng-options="font as font.fontFamily group by font.fontType for font in fonts"></select>
            <select class="variant-list" ng-model="selectedFont.variant" ng-change="showFontPreview(selectedFont,selectedFont.variant)" ng-options="variant for variant in selectedFont.variants" />
        </div>

        <div class="modal-body canvasdesigner-fontfamilypicker">
            <span class="show" ng-style="setStyleVariant()">Aa Bb Cc 1 2 3 4&hellip; <br />The quick brown fox jumps over the lazy dog&hellip;</span>
        </div>

        <div class="right">
            <a class="btn" href="#" ng-click="cancelAndClose()">Cancel</a>
            <a class="btn btn-success" href="#" ng-click="submitAndClose()">Done</a>
        </div>

    </div>

</script>