import {Component, Input} from '@angular/core';
import {LocaleService} from './i18n';

@Component({
  selector: 'field-readonly',
  template: `
  <div layout="column" class="mat-input-container readonly" >
		<div class="mat-input-wrapper">
			<div class="mat-input-table">
				<div class="mat-input-prefix"></div>
				<div class="mat-input-infix">
					<div class="label-value mat-input-element">{{value}}</div>
					<span class="mat-input-placeholder-wrapper" >
						<label class="mat-input-placeholder mat-float">
							<span class="placeholder">{{label}}</span>
						</label>
					</span>
				</div>
				<div class="mat-input-suffix"></div>
			</div>
			<div class="mat-input-underline"></div>
		</div>
	</div>`,
	styles: [`.readonly .mat-input-element {
				margin-top: 0px !important;
				color: rgba(0, 0, 0, 0.50);
			}`,
			`.readonly .mat-input-element {
				margin-top: 0px;
				color: rgba(0, 0, 0, 0.50);
			}`,
			`.readonly.mat-input-container {
				width: 100%;
			}`]
})
export class FieldReadonlyComponent {
	@Input('value') value: any;

	private _label : string;
    @Input('label')
	set label(txt: string) {
		this._label = this.$L.get(txt);
	}
	get label(): string { return this._label; }

	constructor(private $L : LocaleService) {

	}
}