camilosampedro/Aton

<div class="ui card computer" [ngClass]="{green: state.state==1, gray: state.state == 2, pink: state.state == 3, red: state.state == 4}">
    <div class="content">
        <div class="right floated mini ui icon" smDirTooltip="{{stateLabel()}}"><i class="desktop icon" [ngClass]="{green: state.state==1, gray: state.state == 2, pink: state.state == 3, red: state.state == 4}"></i></div>
        <div class="green header">
            {{computer.name}}
        </div>
        <div class="meta">
            <i class="signal icon"></i>{{computer.ip}} | <i class="linux icon"></i> {{state.operatingSystem || "Unknown"}}
        </div>
        <div class="description">
            {{computer.description}}
        </div>
    </div>
    <div *ngIf="isLoggedIn()" class="extra content">
        <div class="ui four buttons">
            <button class="ui basic icon toggle button" [ngClass]="{grey: !isSelected, green: isSelected}" (click)="toggleSelection()" smDirTooltip="Select">
                <i [ngClass]="{checkmark: !isSelected, minus: isSelected}" class="icon"></i>
            </button>
            <button class="ui basic brown icon toggle button" (click)="sendMessageClick()" smDirTooltip="Send a message">
                <i class="talk icon"></i>
            </button>
            <button class="ui basic orange icon toggle button" (click)="sendOrderClick()" smDirTooltip="Send an order">
                <i class="rocket icon"></i>
            </button>
            <button class="ui basic grey icon toggle button" (click)="editComputerClick()" smDirTooltip="Edit this computer">
                <i class="edit icon"></i>
            </button>
        </div>
    </div>
</div>