
<sample>
    <vbox class="ml-2">
        <vstack class="ml-2">
        <!-- <input type="file" id={"sample-file" + this.props.ti} style="width: 120px;"/> -->
        <div>
            <span class="max-width: 120px;text-overflow: ellipsis; white-space: nowrap;">{ getLast(this.props.ti -1)} </span>
            <span class="cursor-pointer" id={"sample" + this.props.ti} onclick={remove(this.props.ti -1)}>(x)</span>
        </div>
        </vstack>
    </vbox>

    <script>
    this.props = opts;

    remove(index) {
        return () => {
            this.props.rmsample(index);
        }
    }

    getLast (index) {
        if (this.props.samples && this.props.samples[index] && this.props.samples[index]["__name"]) {
            var e = this.props.samples[index]["__name"];
            var elems = e.split("/");
            var name = elems[elems.length - 1];
            return name;
        } else {
            console.log(this.props)
            return "";
        }
    }


    this.on("mount", function () {
    });
   </script>
</sample>
