<template>
  <div class="container">
    <div class="col-md-12">
      <h3 class="my-4">Property Listing</h3>
    </div>

    <div>
      <propertyCard
        name="propertyholder"
        v-for="property in Properties"
        :currentProperty="property"
        :key="property.id"
      />
    </div>
    <br />
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1 class="my-4">About Residential Properties</h1>
        </div>
        <div class="col-md-6">
          <p>
            Uni-Vate Properties understands the necessity in property-seekers
            to find that perfect fit;
            a home that meets, and exceeds the individual's needs. That is why,
            our dedicated team sources
            a range of property types, whether that home is a rental option near
            a University for a student
            just starting out, or a family home fit for entertaining.
          </p>
          <p>
            Looking to sell your residential property, instead? Uni-Vate
            Properties prides itself on
            professionalism and the right expertise, to help you secure the
            best possible deal for your home.
          </p>
          <p>
            Wish to RENT your property?
            <a href="./ToRent.vue#residential/torent">Click Here</a>
          </p>
          <p>
            Wish to SELL your property?
            <a href="./ToSell.vue#residential/tosell">Click Here</a>
          </p>
        </div>
        <div class="col-md-4 text-center">
          <p>
            <img class="img-fluid" src alt="About Resale" />
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import propertyCard from '../property/propertyCard.vue';

export default {
  name: 'ResidentialSearch',
  components: {
    propertyCard,
  },
  data() {
    return {
      Properties: [],
    };
  },
  mounted() {
    const axios = require('axios');
    axios
      .get('http://localhost:57260/Property/Property')
      .then(response => (this.Properties = response.data));
  },
};
</script>
