<script>
 import {
     Badge,
     Icon,
     NavItem,
     NavLink,
 } from 'sveltestrap';

 import { issues, issues_need_info, issues_nb_responses, issues_known_responses } from '../stores/issues.js';
 import { settings } from '../stores/settings.js';

 let badge_color = 'secondary';
 $: {
     if ($issues_known_responses != $issues_nb_responses) {
         if ($issues_need_info) {
             badge_color = 'danger';
         } else {
             badge_color = 'warning';
         }
     } else {
         badge_color = 'light';
     }
 }
</script>

{#if $issues.length}
    <NavItem>
        <NavLink href="/issues">
            <Icon name="bug" />
            Problèmes
            <Badge color={badge_color}>{$issues_nb_responses}</Badge>
        </NavLink>
    </NavItem>
{/if}
