<template>
  <md-toolbar class="md-primary">

    <md-button class="md-icon-button" @click="showDrawerClicked">
      <md-icon>menu</md-icon>
    </md-button>
    <span class="md-title">VideON</span>

    <div class="md-toolbar-section-end">

      <md-progress-spinner
          v-if="processing"
          class="white-spinner"
          md-mode="indeterminate"
          :md-stroke="4"
          :md-diameter="35" />

      <md-button class="md-raised" :disabled="!(modelChanged && !processing)" @click="applyClicked">Apply</md-button>

    </div>
  </md-toolbar>
</template>

<script>
export default {
  name: "ToolbarContent",
  props: {
    processing: {
      type: Boolean,
      default: false
    },
    modelChanged: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    showDrawerClicked() {
      this.$emit("showDrawerClicked");
    },
    applyClicked() {
      this.$emit("applyClicked");
    }
  }
}
</script>


<style>
.white-spinner .md-progress-spinner-draw .md-progress-spinner-circle {
  stroke: white !important;
}
</style>