<main id="tt-pageContent">
<div class="container">
<div class="tt-wrapper-inner">
<h1 class="tt-title-border">
Create New Topic
</h1>
<div class="tt-topic-list">
<div class="tt-list-header">
<div class="tt-col-topic">Topic</div>
<div class="tt-col-category">Category</div>
</div>
<div class="tt-item tt-itemselect">
<div class="tt-col-avatar">
<svg class="tt-icon">
<use xlink:href="#icon-heading"></use>
</svg>
</div>
<div class="tt-col-description">
<h6 class="tt-title"><a [routerLink]="['/']">
<svg class="tt-icon">
<use xlink:href="#icon-pinned"></use>
</svg>
<strong> {{ postAdd.title}}</strong>
</a></h6>
<div class="row align-items-center no-gutters">
<div class="col-11">
<ul class="tt-list-badge">
<li class="show-mobile"><a href="#"><span
class="tt-color01 tt-badge">politics</span></a></li>
<li><a href="#"><span class="tt-badge">#{{postAdd.tag}}</span></a></li>
</ul>
</div>
</div>
</div>
<div class="tt-col-category"><span class="tt-color01 tt-badge">{{ postAdd.category }}</span></div>
</div>
<div class="tt-item">
<div class="tt-col-avatar">
<svg class="tt-icon">
<use xlink:href="#icon-performatted"></use>
</svg>
</div>
<div class="tt-col-description">
<h6 class="tt-title"><a >
{{ postAdd.title}}
</a></h6>
<div class="row align-items-center no-gutters hide-desktope">
<div class="col-11">
<ul class="tt-list-badge">
<li class="show-mobile"><a href="#"><span class="tt-color05 tt-badge">music</span></a>
</li>
</ul>
</div>
<div class="col-1 ml-auto show-mobile">
<div class="tt-value">1d</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<form class="form-default form-create-topic">
<div class="form-group">
<label for="inputTopicTitle">Topic Title</label>
<div class="tt-value-wrapper">
<input type="text" matInput
placeholder="Placeholder"
name="title"
[(ngModel)]="postAdd.title" class="form-control" id="inputTopicTitle" placeholder="Subject of your topic">
<span class="tt-value-input">99</span>
</div>
<div class="tt-note">Describe your topic well, while keeping the subject as short as possible.</div>
</div>
<div class="pt-editor">
<h6 class="pt-title">Topic Body</h6>
<div class="pt-row">
<div class="col-left">
</div>
</div>
<div class="form-group">
<textarea matInput
placeholder="Placeholder"
name="title"
[(ngModel)]="postAdd.body" class="form-control" rows="5" placeholder="Lets get started"></textarea>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="inputTopicTitle">Category</label>
<select class="form-control" [(ngModel)]="postAdd.category" name="catagory">
<option value="option"
*ngFor="let catagory of catagorys"
[value]="catagory.type"
>{{ catagory.type }}</option>
</select>
</div>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="inputTopicTags">Tags</label>
<input type="text" name="description" [(ngModel)]="postAdd.tag" class="form-control" id="inputTopicTags" placeholder=" #tags">
</div>
</div>
</div>
<div class="row">
<div class="col-auto ml-md-auto">
<a (click)="submitPostAdd()"
color="primary"
*ngIf="
postAdd.category &&
postAdd.title &&
postAdd.body &&
postAdd.tag
" class="btn btn-secondary btn-width-lg">Create Post</a>
</div>
</div>
</div>
</form>
</div>
<div class="tt-topic-list tt-offset-top-30"></div>
</div>
</main>
<div id="js-popup-settings" class="tt-popup-settings">
<div class="tt-btn-col-close">
<a href="#">
<span class="tt-icon-title">
<svg>
<use xlink:href="#icon-settings_fill"></use>
</svg>
</span>
<span class="tt-icon-text">
Settings
</span>
<span class="tt-icon-close">
<svg>
<use xlink:href="#icon-cancel"></use>
</svg>
</span>
</a>
</div>
<form class="form-default">
<div class="tt-form-upload">
<div class="row no-gutter">
<div class="col-auto">
<div class="tt-avatar">
<svg>
<use xlink:href="#icon-ava-d"></use>
</svg>
</div>
</div>
<div class="col-auto ml-auto">
<a href="#" class="btn btn-primary">Upload Picture</a>
</div>
</div>
</div>
<div class="form-group">
<label for="settingsUserName">Username</label>
<input type="text" name="name" class="form-control" id="settingsUserName" placeholder="azyrusmax">
</div>
<div class="form-group">
<label for="settingsUserEmail">Email</label>
<input type="text" name="name" class="form-control" id="settingsUserEmail" placeholder="Sample@sample.com">
</div>
<div class="form-group">
<label for="settingsUserPassword">Password</label>
<input type="password" name="name" class="form-control" id="settingsUserPassword" placeholder="************">
</div>
<div class="form-group">
<label for="settingsUserLocation">Location</label>
<input type="text" name="name" class="form-control" id="settingsUserLocation" placeholder="Slovakia">
</div>
<div class="form-group">
<label for="settingsUserWebsite">Website</label>
<input type="text" name="name" class="form-control" id="settingsUserWebsite" placeholder="Sample.com">
</div>
<div class="form-group">
<label for="settingsUserAbout">About</label>
<textarea name="" placeholder="Few words about you" class="form-control" id="settingsUserAbout"></textarea>
</div>
<div class="form-group">
<label for="settingsUserAbout">Notify me via Email</label>
<div class="checkbox-group">
<input type="checkbox" id="settingsCheckBox01" name="checkbox">
<label for="settingsCheckBox01">
<span class="check"></span>
<span class="box"></span>
<span class="tt-text">When someone replies to my thread</span>
</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="settingsCheckBox02" name="checkbox">
<label for="settingsCheckBox02">
<span class="check"></span>
<span class="box"></span>
<span class="tt-text">When someone likes my thread or reply</span>
</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="settingsCheckBox03" name="checkbox">
<label for="settingsCheckBox03">
<span class="check"></span>
<span class="box"></span>
<span class="tt-text">When someone mentions me</span>
</label>
</div>
</div>
<div class="form-group">
<a href="#" class="btn btn-secondary">Save</a>
</div>
</form>
</div>