<template>
  <section class="rules-section section">
    <div class="container-fluid">
      <div class="row hr-x">
        <div class="col-12 rules-header">
          <h1 class="rules-header-title mr-3">قوانین</h1>
        </div>
        <div class="col-12 rules-main">
          <div class="rules-main-header">

            <div class="header-nav d-flex justify-content-between">
              <div class="header-nav-right">
                <button
                @click="changeActive(1)"
                :class="{ active: activeButton == 1 }"
              >
                پرکاربردتر
              </button>
              <button
                @click="changeActive(2)"
                :class="{ active: activeButton == 2 }"
              >
                جدیدتر
              </button>
              <button
                @click="changeActive(3)"
                :class="{ active: activeButton == 3 }"
              >
                مشاهده اخیر
              </button>

              </div>
              <div class="header-nav-left">
                <button
                @click="changeActive(4)"
                :class="{ active: activeButton == 4 }"
              >
                همه
              </button>
              </div>
             
            </div>

            <div class="main-nav d-flex flex-wrap mt-5 mr-5">
              <div class="rules-card" v-for="item in 9" :key="item">
                <div class="rules-card-main border-bottom">
                  <p class="">قانون آیین نامه داخلی مجلس شورای اسلامی</p>
                </div>
                <div
                  class="rules-card-footer d-flex justify-content-between align-items-center mt-2"
                >
                  <div class="d-flex">
                    <p class="ml-2 footer-title">تاریخ تصویب:</p>
                    <p class="footer-date">08/11/1386</p>
                  </div>

                  <button>مشاهده</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  
  
  
  data() {
    return {
      activeButton: 1,
    };
  },
  

  methods: {
    changeActive(item) {
      this.activeButton = item;
    },
  },
 
};
</script>
<style scoped lang="scss"></style>