<template>
  <div class="settings-page">
    <h1>Settings</h1>

    <div class="settings-grid">
      <router-link to="/settings/vendors" class="settings-card">
        <div class="card-icon">🏭</div>
        <h3>Vendors</h3>
        <p>Manage equipment vendors and manufacturers</p>
      </router-link>

      <router-link to="/settings/locations" class="settings-card">
        <div class="card-icon">📍</div>
        <h3>Locations</h3>
        <p>Manage physical locations and sites</p>
      </router-link>

      <router-link to="/settings/statuses" class="settings-card">
        <div class="card-icon">🏷️</div>
        <h3>Statuses</h3>
        <p>Manage equipment status types</p>
      </router-link>

      <router-link to="/settings/models" class="settings-card">
        <div class="card-icon">📦</div>
        <h3>Models</h3>
        <p>Manage equipment models by vendor</p>
      </router-link>

      <router-link to="/settings/machinetypes" class="settings-card">
        <div class="card-icon">🖥️</div>
        <h3>Machine Types</h3>
        <p>Manage machine type categories</p>
      </router-link>

      <router-link to="/settings/pctypes" class="settings-card">
        <div class="card-icon">💻</div>
        <h3>PC Types</h3>
        <p>Manage PC form factors</p>
      </router-link>

      <router-link to="/settings/operatingsystems" class="settings-card">
        <div class="card-icon">⚙️</div>
        <h3>Operating Systems</h3>
        <p>Manage OS versions and EOL dates</p>
      </router-link>

      <router-link to="/settings/businessunits" class="settings-card">
        <div class="card-icon">🏢</div>
        <h3>Business Units</h3>
        <p>Manage organizational units</p>
      </router-link>
    </div>
  </div>
</template>

<script setup>
</script>

<style scoped>
.settings-page h1 {
  margin-bottom: 1.5rem;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

.settings-card {
  display: block;
  padding: 1.5rem;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.settings-card:hover {
  border-color: #1976d2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.settings-card h3 {
  margin: 0 0 0.5rem 0;
  color: #333;
}

.settings-card p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}
</style>
