<div id="upload-image-cdn-container" ng-init="parseUploadParams()">
    <h3 class="upload-image-title">Upload an image</h3>
    <div class="row image-characteristic">
        <label class="col-md-4">Name of the image</label>
        <input type="text" class="col-md-7" ng-model="options.name"/>
    </div>
    <div class="row image-characteristic">
        <label class="col-md-4">Set a specific width (px)</label>
        <input type="number" step="1" min="1" max="5000" ng-model="options.width"/>
    </div>
    <div class="row image-characteristic">
        <label class="col-md-4">Set a specific height (px)</label>
        <input type="number" step="1" min="1" max="5000" ng-model="options.height"/>
    </div>
    <div class="alert alert-info">
        <span class="glyphicon glyphicon-info-sign"></span> If no value is provided for width and height, the image will not be altered. The original size will be saved
    </div>
    <div ngf-drop="uploadImage($file)"
      ng-model="files"
      ngf-drag-over-class="'dragover'"
      ngf-select="uploadImage($file)"
      ngf-pattern="'.jpg,.jpeg,.png'"
      ngf-max-size="10MB"
      class="drop-box col-md-6">Select or drop image here</div>
    <div class="alert col-md-12" ng-if="imageUrl">
        <div class="col-md-12 image-url-label">
            Your image url:
        </div>
        {{imageUrl}}
        <button class="btn btn-info" ngclipboard data-clipboard-text={{imageUrl}}>
            <span class="glyphicon glyphicon-copy">Copy</span>
        </button>
    </div>
</div>
