<template>
  <div class="uif-panel">
    <div class="panel-header" :class="{border}">
      <div class="panel-header-title">{{title}}</div>
      <slot name="header"></slot>
    </div>
    <u-loading-bar :loading="loading"></u-loading-bar>
    <div class="panel-content" :class="{padding}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import ULoadingBar from '@uif/admin/lib/components/loading-bar'
export default {
  name: 'u-panel',
  components: {
    ULoadingBar
  },
  props: {
    title: {
      type: String,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: false
    },
    padding: {
      type: Boolean,
      default: false
    }
  }
}
</script>
