@using Sandbox.UI;
@attribute [StyleSheet("/swb_editor/OffsetEditor.cs.scss")]
@inherits Panel
@namespace SWB.Editor

<root>
	<div class="canvas">
		<div class="dot"/>
	</div>
    <div class="hint">
        <div>
			<text class="title">Hold left mouse and drag (mode: </text>
			<text class="title highlight">@DragModeLabel</text>
            <text class="title">)</text>
        </div>
        <text class="subTitle">Click right mouse to change mode</text>
    </div>
    <div class="menu">
		<text class="title">Offset Editor</text>

        <text class="subTitle">Position</text>
		<SliderEntry min="-30" max="30" step="0.01" name="X" Value:bind=@X></SliderEntry>
		<SliderEntry min="-30" max="30" step="0.01" name="Y" Value:bind=@Y></SliderEntry>
		<SliderEntry min="-30" max="30" step="0.01" name="Z" Value:bind=@Z></SliderEntry>

        <text class="subTitle">Angle</text>
		<SliderEntry min="-360" max="360" step="0.01" name="Pitch" Value:bind=@Pitch></SliderEntry>
		<SliderEntry min="-360" max="360" step="0.01" name="Yaw" Value:bind=@Yaw></SliderEntry>
		<SliderEntry min="-360" max="360" step="0.01" name="Roll" Value:bind=@Roll></SliderEntry>

        <text class="subTitle">FOV</text>
		<SliderEntry min="1" max="179" step="1" name="FOV" Value:bind=@FOV></SliderEntry>

        <text class="subTitle">Use Data</text>
        <div class="dataButtons">
            <button style="background-color: #9b59b6;" @onclick=@SetAimAnimData>AimAnimData</button>
            <button style="background-color: #9b59b6;" @onclick=@SetRunAnimData>RunAnimData</button>
            <button style="background-color: #9b59b6;" class="large" @onclick=@SetCustomizeAnimData>CustomizeAnimData</button>
        </div>

        <div class="buttonContainer">
			<button style="background-color: #e84118;" @onclick=@OnReset>RESET</button>
			<button style="background-color: #00a8ff;" @onclick=@OnPrint>PRINT</button>
        </div>
    </div>
</root>