<script setup lang="ts">
defineProps<{
  server: IMCServerStatus
}>()
</script>

<template>
  <div
    v-if="server.online"
    class="p-4"
  >
    <div class="flex justify-between">
      <div class="flex items-center gap-4">
        <!-- Server Logo -->
        <img
          :src="server.icon!"
          alt=""
          class="h-20 w-20 rounded-xl"
        >

        <div>
          <p class="text-2xl font-bold">
            {{ server.hostname?.toUpperCase() || "UNKNOWN HOST" }}
          </p>
          <p class="text-xl">
            {{ server.port }}
          </p>
        </div>
      </div>

      <div class="flex flex-col justify-between text-lg">
        <p class="rounded-lg bg-gray-200 px-2">
          {{ server.version || 'UNKNOWN VERSION' }}
        </p>
        <p class="rounded-lg bg-gray-200 px-2">
          {{ server.players.online }} / {{ server.players.max }}
        </p>
      </div>
    </div>

    <div class="mt-4 rounded-xl bg-blue-100 p-4">
      <p
        v-for="line in server.motd.clean"
        :key="line"
      >
        {{ line }}
      </p>
    </div>

    <div class="mt-4">
      <span class="text-xl">玩家列表</span>
      <div
        v-if="server.players.list?.length"
        class="divide-y-2 divide-dashed"
      >
        <div
          v-for="player in server.players.list"
          :key="player.uuid"
          class="mb-4 flex items-center gap-4 px-4 pt-4 last:mb-0"
        >
          <img
            :src="`https://minotar.net/helm/${player.uuid}/32.png`"
            alt=""
            class="h-12 w-12"
          >
          <p class="text-xl">
            {{ player.name }}
          </p>
        </div>
      </div>
      <div
        v-else
        class="text-center"
      >
        没有在线玩家
      </div>
    </div>

    <div class="mt-4">
      <div class="mt-4 flex justify-end gap-4">
        <a
          href="https://hmcl.huangyuhui.net/"
          class="cursor-pointer rounded-lg bg-blue-400 px-4 py-1 text-lg text-white transition-all hover:bg-blue-500"
        >
          启动器
          <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
        </a>
        <a class="cursor-pointer rounded-lg bg-blue-400 px-4 py-1 text-lg text-white transition-all hover:bg-blue-500">
          整合包
          <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
        </a>
        <a class="cursor-pointer rounded-lg bg-blue-400 px-4 py-1 text-lg text-white transition-all hover:bg-blue-500">
          汉化补丁
          <font-awesome-icon :icon="['fas', 'arrow-up-right-from-square']" />
        </a>
      </div>
    </div>
  </div>
  <div v-else>
    <p class="text-center text-xl p-4">
      服务器离线
    </p>
  </div>
</template>

<style scoped>

</style>
