<template>
    <div class="bg-img-in">
      <user-dashboard-container page-class="complaint" :panel-title="brand?.title" class="panelx">

        <div class="row">
          <div class="col-lg-4 col-sm-12 p-3" style="display: flex; justify-content: center;">
        <img :src="'/uploads/images/brands/' + brand?.logo" width="250">
          </div>
          <div class="col-lg-8 col-sm-12 p-3" style="display: flex; justify-content: center;">
            <p>{{ brand?.description }}</p>
          </div>

          <div class="col-lg-12 col-sm-12 p-3 resp-ali" >
            <CButton size="sm" color="success" :href="brand.link" class="mr-auto" style="font-size: small;"
        >مشاهده محصولات و توضیحات بیشتر ...</CButton>
          </div>

        </div>
      </user-dashboard-container>
    </div>
  </template>
  
  <script>
  export default {
    name: 'PublicBrands',
  
    data() {
      return {
       
        brand:{
          title:'',
          logo:'',
          description:''
        }
       
      }
    },

    mounted() {
      this.$axios.get('/api/public/brand/'+this.$route.params.item).then((res)=>{
        this.brand = res.data
        console.log(res)
      })
    },

  }
  </script>
  <style lang="scss" scoped>
  .err{
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
      -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
      -moz-box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
      border: 2px solid rgba(255, 0, 0, 0.2);
      border-radius: 8px;
  }
  .bg-img-in {
    background: url(@/static/assets/img/home/bg4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-top: groove;
    max-height: calc(100vh + 100px);
  }
  .panelx {
    margin-top: 25%;
    margin-left: auto;
    margin-right: auto;
    width: 80% !important;

  }
  .btn-success{
    border-color: #1063a7;
    background-color: #065495;
    color: aliceblue;
  }
  .el-switch__label--right {
    margin-right: 10px !important;
  }
  
  .el-switch__label--left {
    margin-left: 10px !important;
  }
  </style>
  <style>
  .resp-ali{
      display: flex; justify-content: left;
    }
  @media(max-width: 977px){
    .resp-ali{
      display: flex; justify-content: center;
    }
  }
     .panel-title p{
      color: rgb(148, 148, 148) !important;
      text-shadow: 0.5px 0.5px 1px #dadada;
      padding-right: 2px;
      
     }
    .panel{
      min-height: max-content !important;
      border-radius : 8px !important;
    }
</style>