<div ng-hide="vm.error">
	<div ng-show="vm.loading">
		<spinner>Loading...</spinner>
	</div>

	<div class="ms-ChoiceFieldGroup" ng-hide="vm.loading">
		<div class="ms-ChoiceField" ng-repeat="option in vm.voteOptions" ng-click="vm.selectVoteOption(option.id, $event)">
			<input class="ms-ChoiceField-input" type="radio" value="{{option.id}}" ng-disabled="vm.voting">
			<label class="ms-ChoiceField-field" ng-class="{ 'is-checked': option.id === vm.voteOptionId, 'is-disabled': vm.voting }">
          <span class="ms-Label">{{::option.label}}</span>
      </label>
		</div>
	</div>
	<br />
	<button class="ms-Button ms-Button--primary" ng-disabled="vm.voteOptionId === undefined || vm.voting" ng-click="vm.vote($event)"
		ng-hide="vm.loading" ng-show="vm.voteOptions && vm.voteOptions.length > 0">
		<span class="ms-Button-label">Vote</span>
	</button>
	<br /><br />
	<div ng-show="vm.voting">
		<spinner>Voting...</spinner>
	</div>
</div>
<div ng-show="vm.error" class="ms-fontColor-red">
	<i class="ms-Icon ms-Icon--StatusErrorFull"></i> An error has occured while loading vote options: <em>{{::vm.error.data['odata.error'].message.value}}</em>
</div>