﻿import { Component } from '@angular/core';

import { LoggerService } from './shared/logger.service';

@Component({
    selector: 'blogposts',
    template: `
    <h1>
      <img src="{{imgUrl}}" /> 
      {{pageTitle}}
      <img [src]="imgUrl" /> 
    </h1>
    <h3 [style.color]="titleColor" (click)="colorChange()">{{title}}</h3>
    <div>{{content}}</div>
    <label><input type="checkbox" [(ngModel)]="isShowTags"> 태그 리스트 표시</label>
    <div *ngIf="isShowTags">
      <span class="badge">Angular</span>, ASP.NET Core, Azure
    </div>
    <hr />
    <div class="panel panel-default">
      <div class="panel-heading" (click)="showPostList()">포스트 리스트</div>
      <div class="panel-body" [hidden]="!isShowPostList">
        <ol>
          <li>첫번째 블로그 내용</li><li>두번째 블로그 내용</li>
        </ol>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" (click)="showBlogList()">블로그 리스트</div>
      <div class="panel-body" [hidden]="!isShowBlogList">
        <ul>
          <li>홍길동</li><li>백두산</li>
        </ul>
      </div>
    </div>
  `
})
export class BlogPostsComponent1 {
    pageTitle = '블로그 포스트!';
    imgUrl = "favicon.ico";
    public title: string = '블로그를 오픈합니다.';
    public content: string = "내용 들어오는 곳...";
    titleColor = "black";
    colorChange(): void {
        this.titleColor = (this.titleColor === "black" ? 'blue' : 'black');
    }
    isShowPostList = true;
    showPostList() {
        this.isShowPostList = !this.isShowPostList;
    }
    isShowBlogList = true;
    showBlogList() {
        this.isShowBlogList = !this.isShowBlogList;
    }

    isShowTags = true; // 태그 리스트 표시
}
