<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useAdminLocale } from '../../composables/useAdminLocale';
import AdminSubNav from '../../components/AdminSubNav.vue';
import LeagueOutrightOddsPanel from './LeagueOutrightOddsPanel.vue';

defineOptions({ name: 'AdminLeagueOutrights' });

const route = useRoute();
const { t } = useAdminLocale();

const leagueId = computed(() => String(route.params.leagueId ?? ''));
const leagueTitle = computed(() => {
  const title = String(route.query.title ?? '').trim();
  return title || `#${leagueId.value}`;
});
</script>

<template>
  <div class="admin-list-page league-outrights-page">
    <AdminSubNav
      :title="leagueTitle"
      :subtitle="t('match.league_outrights_subtitle')"
    />

    <section class="list-panel">
      <LeagueOutrightOddsPanel :league-id="leagueId" />
    </section>
  </div>
</template>

<style scoped>
.league-outrights-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.league-outrights-page :deep(.admin-subnav) {
  margin-bottom: 10px;
}

.league-outrights-page .list-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
</style>
