<template>
  <ul>
    <li
      v-for="port in ports"
      :key="port"
      :style="deriveItemWidth()"
    >
      <span style="margin: auto;">{{ port.split(" ")[0] }}</span>
      <span
        class="proto"
        :style="deriveProtocolStyle(port.split(' ')[1])"
      >{{ port.split(" ")[1] }}</span>
    </li>
  </ul>
</template>

<script>
export default {
    name: 'PortList',
    props: {
        ports: {
            type: Array,
            required: true
        },
        itemWidth: {
            type: String,
            default: "75px"
        }
    },
    methods: {
        /**
         * Derives TCP / UDP background colors (Default Wireshark colors)
         **/
        deriveProtocolStyle(proto) {
            return {
                backgroundColor: proto == "TCP" ? "#E7E6FF" : "#D5EFFF",
            }
        },
        /**
         * Derives item width (If provided)
         **/
        deriveItemWidth() {
            return {
                width: this.itemWidth
            }
        }
    }
}
</script>

<style scoped>
.proto {
    border-radius: 4px;
    padding: 0px 2px;
    color: #0A282F;
    margin: auto;
}

li {
    display: flex;
    margin: 10px 43px;
    width: 75px;
}

li span {
    font-weight: 700;
}

ul {
    display: flex;
    column-count: 3;
    flex-wrap: wrap;
    flex-direction: row;
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
</style>
