<template>

<div id="main">
  <div v-if="myJson.tests_without_prefixes.length != 0">
    <div class="accordion-item">
      <div class="tests_without_prefixes accordion-item-head" v-on:click="accordion">
        tests without prefixes: {{ myJson.tests_without_prefixes.length }} ✖
      </div>
      <div class="accordion-item-body">
        <div v-for="test_without_prefixes in myJson.tests_without_prefixes">
          <div class="test_without_prefixes">{{ test_without_prefixes }} ✖</div>
        </div>
      </div>
    </div>
  </div>

  <div v-for="prefix_details in myJson.prefixes_details">

    <div>
      <div class="accordion-item">

        <div class="prefix accordion-item-head active" v-on:click="accordion">
          {{ prefix_details.name }}
        </div>

        <div class="accordion-item-body">

          <div v-if="prefix_details.actions.tests_without_actions.length != 0">
            <div class="accordion-item">
              <div class="tests_without_actions accordion-item-head" v-on:click="accordion">
                tests without actions: {{ prefix_details.actions.tests_without_actions.length }} ✖
              </div>
              <div class="accordion-item-body">
                <div v-for="test_without_actions in prefix_details.actions.tests_without_actions">
                  <div class="test_without_actions">{{ test_without_actions }} ✖</div>
                </div>
              </div>
            </div>
          </div>

          <div v-for="action_details in prefix_details.actions.actions_details">
            <div class="action">
              <router-link
                  :to="{ path: 'action', query: { prefix: prefix_details.name, method: action_details.method, path: action_details.path }}">
                <div class="method">{{ action_details.method }}</div>
                <div class="path">{{ action_details.path }}</div>
                <div v-for="responses_details in action_details.responses.responses_details">
                  <div v-if="responses_details.combinations.cover_percent == '100%'" class="response_good">
                    {{ responses_details.combinations.cover_percent }}
                    {{ responses_details.method }}
                  </div>
                  <div v-else class="response_bad">
                    {{ responses_details.combinations.cover_percent }}
                    {{ responses_details.method }}
                  </div>
                </div>
              </router-link>
            </div>
          </div>

        </div>

      </div>

    </div>

  </div>

</div>

</template>

<script> export default {

name: 'HelloWorld',
props: {
  msg: String
},
data() {
  return {
    myJson: {'stub': 'prefixes report'}
  }
},
methods: {
  accordion: function (event) {
    event.target.classList.toggle('active');
  }
}

} </script>

<!– Add “scoped” attribute to limit CSS to this component only –> <style scoped> h3 {

margin: 40px 0 0;

} ul {

list-style-type: none;
padding: 0;

} li {

display: inline-block;
margin: 0 10px;

} a {

color: #42b983;

}

.tests_without_prefixes {

background-color: #273645;
color: #b94283;
margin: 2px 0px;
padding: 0px 8px;
height: 20px;
text-align: left;

}

.tests_without_prefixes:hover {

background-color: #2b2b2b;

}

.test_without_prefixes {

background-color: #273645;
color: #b94283;
margin: 2px 0px 0px 16px;
height: 20px;
text-align: left;
padding: 0px 8px;

}

.tests_without_actions {

background-color: #273645;
color: #b94283;
margin: 2px 0px 0px 16px;
padding: 0px 8px;
height: 20px;
text-align: left;

}

.tests_without_actions:hover {

background-color: #2b2b2b;

}

.test_without_actions {

background-color: #273645;
color: #b94283;
margin: 2px 0px 0px 24px;
height: 20px;
text-align: left;
padding: 0px 8px;

}

.response_good {

float: left;
text-align: left;
padding: 0px 2px;
color: #42b983;

}

.response_bad {

float: left;
text-align: left;
padding: 0px 2px;
color: #b94283;

}

.action:hover {

background-color: #2b2b2b;

}

.response {

width: 50px;
float: left;
text-align: left;

}

.error {

color: red;
width: 10px;
float: left;
text-align: left;

}

a:link {

color: #42b983;
text-decoration: none;

}

a:visited {

color: #42b983;
text-decoration: none;

}

a:hover {

color: #42b983;
text-decoration: none;

}

a:active {

color: #42b983;
text-decoration: none;

} </style>